spreatics

http://spreatics.com:3000


some parts are not showing in canvas, I tried web-gl with very same assets(atlas, png, json) and checked it works fine with webgl.

below are my source. T.T

I need to finish this project before this weekend. T.T help plz...
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>
전자액자
</title>

<script src="include/js/jquery-3.3.1.min.js"></script>

<script src="spine_canvas/build/spine-canvas.js"></script>

<style>
body #canvas {
width: 100%;
height: 416px;
cursor: pointer;
}
</style>
</head>

<body>
<canvas id="canvas" onclick="change_animation();"></canvas>

<script>
//spine/////////////////////////////////////////////////////////////////////////////////////////////////////////////
var lastFrameTime = Date.now() / 1000;
var canvas, context;
var assetManager;
var skeleton, state, bounds;
var skeletonRenderer;

var bgColor = "
#FDF5E6";
var assetDirectory = "
spine_canvas/assets/";

var skelName = "
taad";
//boring, default, happy, hungry, message, sleep
var animName = "
a_default";

function init(){
canvas = document.getElementById( "
canvas" );
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext( "
2d" );

skeletonRenderer = new spine.canvas.SkeletonRenderer( context );

assetManager = new spine.canvas.AssetManager();

assetManager.loadText( assetDirectory + skelName + "
.json" );
assetManager.loadText( assetDirectory + skelName + "
.atlas");
assetManager.loadTexture( assetDirectory + skelName + "
.png");

requestAnimationFrame( load );
}

function load(){
if ( assetManager.isLoadingComplete() ){
var data = loadSkeleton( skelName, animName, "
default" );
skeleton = data.skeleton;
state = data.state;
bounds = data.bounds;
requestAnimationFrame( render );
}
else {
requestAnimationFrame( load );
}
}

var animationState;

function loadSkeleton( name, initialAnimation, skin ){
if ( skin === undefined ) skin = "
default";

atlas = new spine.TextureAtlas( assetManager.get( assetDirectory + name + "
.atlas"), function( path ){
return assetManager.get( assetDirectory + path );
});

atlasLoader = new spine.AtlasAttachmentLoader( atlas );

var skeletonJson = new spine.SkeletonJson( atlasLoader );

var skeletonData = skeletonJson.readSkeletonData( assetManager.get( assetDirectory + name + "
.json" ) );
var skeleton = new spine.Skeleton( skeletonData );
skeleton.flipY = true;
var bounds = calculateBounds( skeleton );
skeleton.setSkinByName( skin );

animationState = new spine.AnimationState( new spine.AnimationStateData( skeleton.data ) );
animationState.setAnimation( 0, initialAnimation, true );
animationState.addListener({
event: function( trackIndex, event ){
// console.log("
Event on track " + trackIndex + ": " + JSON.stringify(event));
},
complete: function( trackIndex, loopCount ){
// console.log("
Animation on track " + trackIndex + " completed, loop count: " + loopCount);
},
start: function( trackIndex ){
// console.log("
Animation on track " + trackIndex + " started");
},
end: function( trackIndex ){
// console.log("
Animation on track " + trackIndex + " ended");
}
})

return { skeleton: skeleton, state: animationState, bounds: bounds };
}

function calculateBounds( skeleton ){
var data = skeleton.data;
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds( offset, size, [] );

return { offset: offset, size: size };
}

function render(){
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;

resize();

context.save();
context.setTransform( 1, 0, 0, 1, 0, 0 );
context.fillStyle = bgColor;
context.fillRect( 0, 0, canvas.width, canvas.height );
context.restore();

state.update( delta );
state.apply( skeleton );
skeleton.updateWorldTransform();
skeletonRenderer.draw( skeleton );

requestAnimationFrame( render );
}

function resize(){
var w = canvas.clientWidth;
var h = canvas.clientHeight;
if ( canvas.width != w || canvas.height != h ){
canvas.width = w;
canvas.height = h;
}

// magic
var centerX = bounds.offset.x + bounds.size.x / 2;
var centerY = bounds.offset.y + bounds.size.y / 2;
var scaleX = bounds.size.x / canvas.width;
var scaleY = bounds.size.y / canvas.height;
var scale = Math.max( scaleX, scaleY ) * 1.2;
if ( scale < 1 ) scale = 1;
var width = canvas.width * scale;
var height = canvas.height * scale;

context.setTransform( 1, 0, 0, 1, 0, 0 );
context.scale( 1 / scale, 1 / scale );
context.translate( -centerX, -centerY );
context.translate( width / 2, height / 2 );
}

(function() {
init();
}());
//spine/////////////////////////////////////////////////////////////////////////////////////////////////////////////
</script>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
spreatics
  • Posts: 12

Nate

FWIW, your link gives me only Cannot GET /spine.html but I see the screenshot of the problem.

Please see the compatibility notes here:
spine-runtimes/spine-ts at 3.8
spine-ts Canvas does not support color tinting, mesh attachments and clipping. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting spine.canvas.SkeletonRenderer.useTriangleRendering to true. Note that this method is slow and may lead to artifacts on some browsers.
User avatar
Nate

Nate
  • Posts: 9161

spreatics

sorry! I changed url to http://spreatics.com:3000/
plus, I solved the problem with SkeletonRenderer.useTriangleRendering = true
Thanks a million!
Nate wrote:FWIW, your link gives me only Cannot GET /spine.html but I see the screenshot of the problem.

Please see the compatibility notes here:
spine-runtimes/spine-ts at 3.8
spine-ts Canvas does not support color tinting, mesh attachments and clipping. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting spine.canvas.SkeletonRenderer.useTriangleRendering to true. Note that this method is slow and may lead to artifacts on some browsers.
spreatics
  • Posts: 12

badlogic

Note that this feature in spine-ts Canvas is highly experimental. Pretty much only Chrome renders triangles correctly. Other browsers will show sampling artifacts. It also causes a slow down. If you can, switch to spine-ts WebGL.
User avatar
badlogic

Mario
  • Posts: 1936


Return to Runtimes