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>
