UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 17:56:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Adjusted skeleton positions.

Browse Source
This commit is contained in:
NathanSweet 2016-09-03 17:18:31 +02:00
parent 7646c28f9d
commit 1e650a70ac
6 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
spine-ts/webgl/demos/framebyframe.js
View File

@ -144,8 +144,16 @@ var frameByFrameDemo = function(loadingComplete, bgColor) {
var offset = active.bounds.offset; var offset = active.bounds.offset;
var size = active.bounds.size; var size = active.bounds.size;
var x = offset.x + size.x + 100, offsetY = offset.y;
if (activeSkeleton === "Alien") {
renderer.camera.position.x = offset.x + size.x - 100;
renderer.camera.position.y = offset.y + size.y / 2 + 100;
offsetY += 125;
} else {
renderer.camera.position.x = offset.x + size.x; renderer.camera.position.x = offset.x + size.x;
renderer.camera.position.y = offset.y + size.y / 2; renderer.camera.position.y = offset.y + size.y / 2;
x += 100;
}
renderer.camera.viewportWidth = size.x * 2.4; renderer.camera.viewportWidth = size.x * 2.4;
renderer.camera.viewportHeight = size.y * 1.4; renderer.camera.viewportHeight = size.y * 1.4;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.webgl.ResizeMode.Fit);
@ -169,8 +177,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) {
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
var x = offset.x + size.x + 100; var y = offsetY;
var y = offset.y;
var slotsWidth = 0, slotsHeight = 0; var slotsWidth = 0, slotsHeight = 0;
var slotSize = size.y / 3; var slotSize = size.y / 3;
var maxSlotWidth = 0; var maxSlotWidth = 0;
@ -207,7 +214,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) {
if (j == 3) { if (j == 3) {
x += maxSlotWidth + 10; x += maxSlotWidth + 10;
maxSlotWidth = 0; maxSlotWidth = 0;
y = offset.y; y = offsetY;
j = 0; j = 0;
} }
} }

6
spine-ts/webgl/demos/meshes.js
View File

@ -139,9 +139,9 @@ var meshesDemo = function(loadingComplete, bgColor) {
var size = active.bounds.size; var size = active.bounds.size;
renderer.camera.position.x = offset.x + size.x / 2; renderer.camera.position.x = offset.x + size.x / 2;
renderer.camera.position.y = offset.y + size.y / 2; renderer.camera.position.y = offset.y + size.y / 2 + 20;
renderer.camera.viewportWidth = size.x * 1.2; renderer.camera.viewportWidth = size.x * 1.1;
renderer.camera.viewportHeight = size.y * 1.2; renderer.camera.viewportHeight = size.y * 1.1;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);

4
spine-ts/webgl/demos/skins.js
View File

@ -211,10 +211,10 @@ var skinsDemo = function(loadingComplete, bgColor) {
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
var texture = assetManager.get(DEMO_NAME, "heroes.png"); var texture = assetManager.get(DEMO_NAME, "heroes.png");
var width = bounds.x; var width = bounds.x * 1.25;
var scale = width / texture.getImage().width; var scale = width / texture.getImage().width;
var height = scale * texture.getImage().height; var height = scale * texture.getImage().height;
renderer.drawTexture(texture, offset.x + bounds.x + 200, offset.y + bounds.y / 2 - height / 2 - 50, width, height); renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
renderer.end(); renderer.end();
} }

6
spine-ts/webgl/demos/transitions.html
View File

@ -6,17 +6,17 @@
<script src="transitions.js"></script> <script src="transitions.js"></script>
<body> <body>
<canvas id="transitions-canvas"></canvas> <canvas id="transitionsdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
Time multiplier Time multiplier
<div id="transitions-timeslider" class="slider"></div></br> <div id="transitionsdemo-timeslider" class="slider"></div></br>
</div> </div>
</center> </center>
<script> <script>
spineDemos.loadSliders(); spineDemos.loadSliders();
transitions(spineDemos.setupRendering); transitionsDemo(spineDemos.setupRendering);
</script> </script>
</body> </body>

12
spine-ts/webgl/demos/transitions.js
View File

@ -1,4 +1,4 @@
var transitions = function(loadingComplete, bgColor) { var transitionsDemo = function(loadingComplete, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
@ -12,10 +12,10 @@ var transitions = function(loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
timeSlider = $("#transitions-timeslider").data("slider"); timeSlider = $("#transitionsdemo-timeslider").data("slider");
timeSlider.set(0.5); timeSlider.set(0.5);
timeSliderLabel = $("#transitions-timeslider-label")[0]; timeSliderLabel = $("#transitionsdemo-timeslider-label")[0];
canvas = document.getElementById("transitions-canvas"); canvas = document.getElementById("transitionsdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -50,8 +50,8 @@ var transitions = function(loadingComplete, bgColor) {
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() }; bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
skeleton.getBounds(bounds.offset, bounds.size); skeleton.getBounds(bounds.offset, bounds.size);
setupInput(); setupInput();
$("#transitions-overlay").removeClass("overlay-hide"); $("#transitionsdemo-overlay").removeClass("overlay-hide");
$("#transitions-overlay").addClass("overlay"); $("#transitionsdemo-overlay").addClass("overlay");
loadingComplete(canvas, render); loadingComplete(canvas, render);
} else { } else {
loadingScreen.draw(); loadingScreen.draw();

3
spine-ts/webgl/demos/utils.js
View File

@ -75,7 +75,8 @@ var spineDemos = {
value = percent; value = percent;
} }
function mouseEvent (e) { function mouseEvent (e) {
var x = e.pageX || e.originalEvent.touches[0].pageX; var x = e.pageX;
if (!x && e.originalEvent.touches) x = e.originalEvent.touches[0].pageX;
var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2))); var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2)));
positionHandle(percent); positionHandle(percent);
if (object.changed) object.changed(percent); if (object.changed) object.changed(percent);