I already used webGL. but skin not center (standart skin already too)
How i centered my animation?
Code standart test-simple.html. but i add resize and calculateSetupPoseBounds
<script>
var ANIMATION = "walk";
var mvp = new spine.Matrix4();
var canvas, context, gl, renderer, input, assetManager;
var timeKeeper;
var skeleton;
var animationState;
function init() {
canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl;
renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.Input(canvas);
assetManager.loadTextureAtlas("winskin.atlas");
assetManager.loadText("winskin.json");
timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load);
}
var run = true;
function load() {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get("winskin.atlas");
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
let skeletonJson = new spine.SkeletonJson(atlasLoader);
let skeletonData = skeletonJson.readSkeletonData(assetManager.require("winskin.json"));
var time = new spine.TimeKeeper()
skeleton = new spine.Skeleton(skeletonData);
this.bounds = calculateSetupPoseBounds(skeleton);
var stateData = new spine.AnimationStateData(skeleton.data);
animationState = new spine.AnimationState(stateData);
stateData.defaultMix = 0;
animationState.setAnimation(0, ANIMATION, true);
requestAnimationFrame(render);
} else {
requestAnimationFrame(load);
}
}
function render() {
var start = Date.now()
timeKeeper.update();
var delta = timeKeeper.delta;
resize();
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.ResizeMode.Expand);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.end();
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;
}
// Calculations to center the skeleton in the canvas.
var bounds = this.bounds;
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) * 2;
if (scale < 1) scale = 1;
var width = canvas.width * scale;
var height = canvas.height * scale;
mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
gl.viewport(0, 0, canvas.width, canvas.height);
}
function calculateSetupPoseBounds(skeleton) {
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size, []);
return { offset: offset, size: size };
}
init();
</script>
