UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-16 12:01:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Removed alert in Input.ts, refactored spritesheet demo

Browse Source
This commit is contained in:
badlogic 2016-08-31 12:22:59 +02:00
parent 0e59f99956
commit 87a793f31e
9 changed files with 43 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/build/spine-all.js
View File

@ -5029,7 +5029,6 @@ var spine;
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
alert(JSON.stringify(touches));
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var rect = element.getBoundingClientRect();

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

1
spine-ts/build/spine-webgl.js
View File

@ -4606,7 +4606,6 @@ var spine;
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
alert(JSON.stringify(touches));
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var rect = element.getBoundingClientRect();

2
spine-ts/build/spine-webgl.js.map
View File

File diff suppressed because one or more lines are too long

1
spine-ts/build/spine-widget.js
View File

@ -4606,7 +4606,6 @@ var spine;
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
alert(JSON.stringify(touches));
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var rect = element.getBoundingClientRect();

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

14
spine-ts/webgl/demos/skeletalvssprite.html → spine-ts/webgl/demos/spritesheet.html
View File

@ -11,21 +11,19 @@
.slider { width: 50%; }
</style>
<body>
<canvas id="skeletonvsspritedemo-canvas"></canvas>
<canvas id="spritesheetdemo-canvas"></canvas>
<div style="position: fixed; top: 0; width: 100%">
<center>
<span style="color: #fff">Time Multiplier</span>
<div id="skeletonvsspritedemo-timeslider" class="slider"></div></br>
<span style="color: #fff">Show Atlas</span>
<input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input></br>
<input id="skeletonvsspritedemo-playbutton" type="button" value="Pause"></input>
<div id="skeletonvsspritedemo-timeline" class="slider"></div>
<div id="spritesheetdemo-timeslider" class="slider"></div></br>
<input id="spritesheetdemo-playbutton" type="button" value="Pause"></input>
<div id="spritesheetdemo-timeline" class="slider"></div>
</center>
</div>
<script src="utils.js"></script>
<script src="skeletonvssprite.js"></script>
<script src="spritesheet.js"></script>
<script>
skeletonVsSpriteDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
spritesheetDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
</script>
</body>
</html>

87
spine-ts/webgl/demos/skeletonvssprite.js → spine-ts/webgl/demos/spritesheet.js
View File

@ -1,22 +1,21 @@
var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
var spritesheetDemo = function(pathPrefix, loadingComplete) {
var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, animationState, offset, bounds;
var skeletonSeq, walkAnim, walkLastTime = 0, walkLastTimePrecise = 0;
var skeletonAtlas;
var sequenceAtlas;
var skeletonAtlas;
var viewportWidth, viewportHeight;
var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
var lastFrameTime = Date.now() / 1000;
var timeSlider, timeSliderLabel, atlasCheckbox;
var timeSlider, timeSliderLabel;
var playButton, timeLine, isPlaying = true, playTime = 0, framePlaytime = 0;
function init () {
if (pathPrefix === undefined) pathPrefix = "";
canvas = document.getElementById("skeletonvsspritedemo-canvas");
canvas = document.getElementById("spritesheetdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -25,7 +24,6 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
assetManager.loadTexture("raptor.png");
assetManager.loadText("raptor.json");
assetManager.loadText("raptor.atlas");
assetManager.loadTexture("raptor-sequenceatlas.png");
requestAnimationFrame(load);
}
@ -33,8 +31,7 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
if (assetManager.isLoadingComplete()) {
skeletonAtlas = new spine.TextureAtlas(assetManager.get("raptor.atlas"), function(path) {
return assetManager.get("" + path);
});
sequenceAtlas = assetManager.get("raptor-sequenceatlas.png");
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(skeletonAtlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("raptor.json"));
@ -61,7 +58,7 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
}
function setupUI() {
playButton = $("#skeletonvsspritedemo-playbutton");
playButton = $("#spritesheetdemo-playbutton");
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) {
@ -74,7 +71,7 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
}
playButton.click(playButtonUpdate);
timeLine = $("#skeletonvsspritedemo-timeline");
timeLine = $("#spritesheetdemo-timeline");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) {
@ -98,10 +95,9 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
}
}});
timeSlider = $("#skeletonvsspritedemo-timeslider");
timeSlider = $("#spritesheetdemo-timeslider");
timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 });
timeSliderLabel = $("#skeletonvsspritedemo-timeslider-label");
atlasCheckbox = document.getElementById("skeletonvsspritedemo-atlascheckbox");
timeSliderLabel = $("#spritesheetdemo-timeslider-label");
}
function render () {
@ -112,29 +108,27 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
delta *= (timeSlider.slider("value") / 100);
if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%");
if (!atlasCheckbox.checked) {
if (isPlaying) {
var animationDuration = animationState.getCurrent(0).animation.duration;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
timeLine.slider("value", (playTime / animationDuration * 100));
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
walkLastTimePrecise += delta;
while (walkLastTimePrecise - walkLastTime > 1 / FPS) {
var newWalkTime = walkLastTime + 1 / FPS;
walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null);
walkLastTime = newWalkTime;
}
skeletonSeq.updateWorldTransform();
if (isPlaying) {
var animationDuration = animationState.getCurrent(0).animation.duration;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
}
timeLine.slider("value", (playTime / animationDuration * 100));
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
walkLastTimePrecise += delta;
while (walkLastTimePrecise - walkLastTime > 1 / FPS) {
var newWalkTime = walkLastTime + 1 / FPS;
walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null);
walkLastTime = newWalkTime;
}
skeletonSeq.updateWorldTransform();
}
renderer.camera.position.x = offset.x + viewportWidth / 2 + 100;
renderer.camera.position.y = offset.y + viewportHeight / 2;
@ -144,25 +138,10 @@ var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
if (!atlasCheckbox.checked) {
var frame = frames[currFrame];
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeletonSeq, true);
} else {
var atlasTexture = skeletonAtlas.pages[0].texture;
var atlasSize = atlasTexture.getImage().width;
renderer.rect(true, offset.x + bounds.x / 2 - atlasSize / 2,
offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize, spine.Color.WHITE);
renderer.drawTexture(atlasTexture, offset.x + bounds.x / 2 - atlasSize / 2,
offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize);
renderer.rect(false, offset.x + bounds.x / 2 - atlasSize / 2,
offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize, spine.Color.RED);
var seqAtlasSize = atlasSize * 2;
renderer.drawTexture(sequenceAtlas, offset.x + bounds.x / 2 + bounds.x - seqAtlasSize / 2 + 211,
offset.y + bounds.y / 2 - seqAtlasSize / 2, seqAtlasSize, seqAtlasSize);
}
renderer.begin();
var frame = frames[currFrame];
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeletonSeq, true);
renderer.end();
}

3
spine-ts/webgl/src/Input.ts
View File

@ -101,8 +101,7 @@ module spine.webgl {
element.addEventListener("touchstart", (ev: TouchEvent) => {
if (this.currTouch != null) return;
var touches = ev.changedTouches;
alert(JSON.stringify(touches));
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
let rect = element.getBoundingClientRect();