UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 15:24:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/esotericsoftware/spine-runtimes

Browse Source
This commit is contained in:
badlogic 2016-09-13 11:26:31 +02:00
commit 3ada70e2aa
35 changed files with 549 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
spine-c/src/spine/SkeletonBinary.c
View File

@ -656,7 +656,11 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput
int i;
spAttachmentType type;
const char* name = readString(input);
if (!name) MALLOC_STR(name, attachmentName);
int freeName = name != 0;
if (!name) {
freeName = 0;
MALLOC_STR(name, attachmentName);
}
type = (spAttachmentType)readByte(input);
@ -680,6 +684,7 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput
readColor(input, &region->r, &region->g, &region->b, &region->a);
spRegionAttachment_updateOffset(region);
spAttachmentLoader_configureAttachment(self->attachmentLoader, attachment);
if (freeName) FREE(name);
return attachment;
}
case SP_ATTACHMENT_BOUNDING_BOX: {
@ -689,6 +694,7 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput
_readVertices(self, input, SUB_CAST(spVertexAttachment, attachment), vertexCount);
if (nonessential) readInt(input); /* Skip color. */
spAttachmentLoader_configureAttachment(self->attachmentLoader, attachment);
if (freeName) FREE(name);
return attachment;
}
case SP_ATTACHMENT_MESH: {
@ -717,6 +723,7 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput
mesh->height = 0;
}
spAttachmentLoader_configureAttachment(self->attachmentLoader, attachment);
if (freeName) FREE(name);
return attachment;
}
case SP_ATTACHMENT_LINKED_MESH: {
@ -738,6 +745,7 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput
mesh->height = readFloat(input) * self->scale;
}
_spSkeletonBinary_addLinkedMesh(self, mesh, skinName, slotIndex, parent);
if (freeName) FREE(name);
return attachment;
}
case SP_ATTACHMENT_PATH: {
@ -755,10 +763,12 @@ spAttachment* spSkeletonBinary_readAttachment(spSkeletonBinary* self, _dataInput
path->lengths[i] = readFloat(input) * self->scale;
}
if (nonessential) readInt(input); /* Skip color. */
if (freeName) FREE(name);
return attachment;
}
}
if (freeName) FREE(name);
return 0;
}

4
spine-cocos2dx/example/Classes/BatchingExample.cpp
View File

@ -44,10 +44,6 @@ Scene* BatchingExample::scene () {
bool BatchingExample::init () {
if (!LayerColor::initWithColor(Color4B(128, 128, 128, 255))) return false;
// To avoid the SkeletonBatch buffer from being resized, set this to the number of vertices ever rendered in one frame.
// BatchingExample needs ~3200, but let's set it low to test the buffer resizing.
SkeletonBatch::setBufferSize(512);
// Load the texture atlas.
_atlas = spAtlas_createFromFile("spineboy.atlas", 0);
CCASSERT(_atlas, "Error reading atlas file.");

170
spine-cocos2dx/src/spine/SkeletonBatch.cpp
View File

@ -1,10 +1,10 @@
/******************************************************************************
* Spine Runtimes Software License
* Version 2.3
*
*
* Copyright (c) 2013-2015, Esoteric Software
* All rights reserved.
*
*
* You are granted a perpetual, non-exclusive, non-sublicensable and
* non-transferable license to use, install, execute and perform the Spine
* Runtimes Software (the "Software") and derivative works solely for personal
@ -16,7 +16,7 @@
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
@ -38,102 +38,72 @@ USING_NS_CC;
using std::max;
namespace spine {
static SkeletonBatch* instance = nullptr;
void SkeletonBatch::setBufferSize (int vertexCount) {
if (instance) delete instance;
instance = new SkeletonBatch(vertexCount);
}
SkeletonBatch* SkeletonBatch::getInstance () {
if (!instance) instance = new SkeletonBatch(8192);
return instance;
}
void SkeletonBatch::destroyInstance () {
if (instance) {
delete instance;
instance = nullptr;
static SkeletonBatch* instance = nullptr;
SkeletonBatch* SkeletonBatch::getInstance () {
if (!instance) instance = new SkeletonBatch();
return instance;
}
}
SkeletonBatch::SkeletonBatch (int capacity) :
_capacity(capacity), _position(0)
{
_buffer = new V3F_C4B_T2F[capacity];
_firstCommand = new Command();
_command = _firstCommand;
Director::getInstance()->getEventDispatcher()->addCustomEventListener(EVENT_AFTER_DRAW_RESET_POSITION, [this](EventCustom* eventCustom){
this->update(0);
});;
}
SkeletonBatch::~SkeletonBatch () {
Director::getInstance()->getEventDispatcher()->removeCustomEventListeners(EVENT_AFTER_DRAW_RESET_POSITION);
Command* command = _firstCommand;
while (command) {
Command* next = command->next;
delete command;
command = next;
}
delete [] _buffer;
}
void SkeletonBatch::update (float delta) {
_position = 0;
_command = _firstCommand;
}
void SkeletonBatch::addCommand (cocos2d::Renderer* renderer, float globalZOrder, GLuint textureID, GLProgramState* glProgramState,
BlendFunc blendFunc, const TrianglesCommand::Triangles& triangles, const Mat4& transform, uint32_t transformFlags
) {
if (_position + triangles.vertCount > _capacity) {
int newCapacity = max(_capacity + _capacity / 2, _position + triangles.vertCount);
V3F_C4B_T2F* newBuffer = new V3F_C4B_T2F[newCapacity];
memcpy(newBuffer, _buffer, _position);
int newPosition = 0;
Command* command = _firstCommand;
while (newPosition < _position) {
command->triangles->verts = newBuffer + newPosition;
newPosition += command->triangles->vertCount;
command = command->next;
}
delete [] _buffer;
_buffer = newBuffer;
_capacity = newCapacity;
}
memcpy(_buffer + _position, triangles.verts, sizeof(V3F_C4B_T2F) * triangles.vertCount);
_command->triangles->verts = _buffer + _position;
_position += triangles.vertCount;
_command->triangles->vertCount = triangles.vertCount;
_command->triangles->indexCount = triangles.indexCount;
_command->triangles->indices = triangles.indices;
_command->trianglesCommand->init(globalZOrder, textureID, glProgramState, blendFunc, *_command->triangles, transform, transformFlags);
renderer->addCommand(_command->trianglesCommand);
if (!_command->next) _command->next = new Command();
_command = _command->next;
}
SkeletonBatch::Command::Command () :
next(nullptr)
{
trianglesCommand = new TrianglesCommand();
triangles = new TrianglesCommand::Triangles();
}
SkeletonBatch::Command::~Command () {
delete triangles;
delete trianglesCommand;
}
}
void SkeletonBatch::destroyInstance () {
if (instance) {
delete instance;
instance = nullptr;
}
}
SkeletonBatch::SkeletonBatch ()
{
_firstCommand = new Command();
_command = _firstCommand;
Director::getInstance()->getEventDispatcher()->addCustomEventListener(EVENT_AFTER_DRAW_RESET_POSITION, [this](EventCustom* eventCustom){
this->update(0);
});;
}
SkeletonBatch::~SkeletonBatch () {
Director::getInstance()->getEventDispatcher()->removeCustomEventListeners(EVENT_AFTER_DRAW_RESET_POSITION);
Command* command = _firstCommand;
while (command) {
Command* next = command->next;
delete command;
command = next;
}
}
void SkeletonBatch::update (float delta) {
_command = _firstCommand;
}
void SkeletonBatch::addCommand (cocos2d::Renderer* renderer, float globalZOrder, GLuint textureID, GLProgramState* glProgramState,
BlendFunc blendFunc, const TrianglesCommand::Triangles& triangles, const Mat4& transform, uint32_t transformFlags
) {
_command->triangles->verts = triangles.verts;
_command->triangles->vertCount = triangles.vertCount;
_command->triangles->indexCount = triangles.indexCount;
_command->triangles->indices = triangles.indices;
_command->trianglesCommand->init(globalZOrder, textureID, glProgramState, blendFunc, *_command->triangles, transform);
renderer->addCommand(_command->trianglesCommand);
if (!_command->next) _command->next = new Command();
_command = _command->next;
}
SkeletonBatch::Command::Command () :
next(nullptr)
{
trianglesCommand = new TrianglesCommand();
triangles = new TrianglesCommand::Triangles();
}
SkeletonBatch::Command::~Command () {
delete triangles;
delete trianglesCommand;
}
}

75
spine-cocos2dx/src/spine/SkeletonBatch.h
View File

@ -1,10 +1,10 @@
/******************************************************************************
* Spine Runtimes Software License
* Version 2.3
*
*
* Copyright (c) 2013-2015, Esoteric Software
* All rights reserved.
*
*
* You are granted a perpetual, non-exclusive, non-sublicensable and
* non-transferable license to use, install, execute and perform the Spine
* Runtimes Software (the "Software") and derivative works solely for personal
@ -16,7 +16,7 @@
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
@ -36,45 +36,36 @@
#include "cocos2d.h"
namespace spine {
class SkeletonBatch {
public:
/* Sets the max number of vertices that can be drawn in a single frame. The buffer will grow automatically as needed, but
* setting it to the appropriate is more efficient. Best to call before getInstance is called for the first time. Default is
* 8192. */
static void setBufferSize (int vertexCount);
static SkeletonBatch* getInstance ();
static void destroyInstance ();
void update (float delta);
void addCommand (cocos2d::Renderer* renderer, float globalOrder, GLuint textureID, cocos2d::GLProgramState* glProgramState,
cocos2d::BlendFunc blendType, const cocos2d::TrianglesCommand:: Triangles& triangles, const cocos2d::Mat4& mv, uint32_t flags);
protected:
SkeletonBatch (int capacity);
virtual ~SkeletonBatch ();
cocos2d::V3F_C4B_T2F* _buffer;
int _capacity;
int _position;
class Command {
public:
Command ();
virtual ~Command ();
cocos2d::TrianglesCommand* trianglesCommand;
cocos2d::TrianglesCommand::Triangles* triangles;
Command* next;
};
Command* _firstCommand;
Command* _command;
};
class SkeletonBatch {
public:
static SkeletonBatch* getInstance ();
static void destroyInstance ();
void update (float delta);
void addCommand (cocos2d::Renderer* renderer, float globalOrder, GLuint textureID, cocos2d::GLProgramState* glProgramState,
cocos2d::BlendFunc blendType, const cocos2d::TrianglesCommand:: Triangles& triangles, const cocos2d::Mat4& mv, uint32_t flags);
protected:
SkeletonBatch ();
virtual ~SkeletonBatch ();
class Command {
public:
Command ();
virtual ~Command ();
cocos2d::TrianglesCommand* trianglesCommand;
cocos2d::TrianglesCommand::Triangles* triangles;
Command* next;
};
Command* _firstCommand;
Command* _command;
};
}
#endif // SPINE_SKELETONBATCH_H_
#endif // SPINE_SKELETONBATCH_H_

23
spine-ts/README.md
View File

@ -36,9 +36,8 @@ All `*.js` files are self-contained and include both the core and respective bac
If you write your app with TypeScript, additionally copy the corresponding `build/spine-*.d.ts` file to your project.
## Example
To run the examples, spawn a light-weight web server in the root of spine-ts, then navigate to the respective
`index.html` file. E.g.:
## Examples
To run the examples, the image, atlas, and JSON files must be served by a webserver, they can't be loaded from your local disk. Spawn a light-weight web server in the root of spine-ts, then navigate to the `index.html` file for the example you want to view. E.g.:
```
cd spine-ts
@ -47,6 +46,22 @@ python -m SimpleHTTPServer
Then open `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `https://localhost:8000/threejs/example` or `http://localhost:8000/widget/example` in your browser.
## WebGL Demos
The spine-ts WebGL demos load their image, atlas, and JSON files from our webserver and so can be run directly, without needing a webserver. View the demos [all on one page](http://esotericsoftware.com/spine-demos/) or use the [standalone demos]() which are easy for you to explore and edit. The standalone demos can also be viewed here:
- [Spine vs sprite sheets](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/spritesheets.html)
- [Image changes](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/imagechanges.html)
- [Transitions](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/transitions.html)
- [Meshes](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/meshes.html)
- [Skins](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/skins.html)
- [Hoverboard](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/hoverboard.html)
- [Transform constraints](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/transforms.html)
- [Tank](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/tank.html)
- [Vine](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/vine.html)
- [Stretchyman](http://rawgit.com/EsotericSoftware/spine-runtimes/master/spine-ts/webgl/demos/stretchyman.html)
Please note that Chrome and possibly other browsers do not use the original CORS headers when loading cached resources. After the initial page load for a demo, you may need to forcefully refresh (hold `shift` and click refresh) or clear your browser cache.
## Development Setup
The spine-ts runtime and the various backends are implemented in TypeScript for greater maintainability and better tooling support. To
setup a development environment, follow these steps.
@ -58,7 +73,7 @@ setup a development environment, follow these steps.
5. Start the TypeScript compiler in watcher mode for the backend you want to work on:
* **Core**: `tsc -w -p tsconfig.core.json`, builds `core/src`, outputs `build/spine-core.js|d.ts|js.map`
* **WebGL**: `tsc -w -p tsconfig.webgl.json`, builds `core/src` and `webgl/src`, outputs `build/spine-webgl.js|d.ts|js.map`
* **WebGL**: `tsc -w -p tsconfig.canvas.json`, builds `core/src` and `canvas/src`, outputs `build/spine-canvas.js|d.ts|js.map`
* **Canvas**: `tsc -w -p tsconfig.canvas.json`, builds `core/src` and `canvas/src`, outputs `build/spine-canvas.js|d.ts|js.map`
* **THREE.JS**: `tsc -w -p tsconfig.threejs.json`, builds `core/src` and `threejs/src`, outputs `build/spine-threejs.js|d.ts|js.map`
* **Widget**: `tsc -w -p tsconfig.widget.json`, builds `core/src` and `widget/src`, outputs `build/spine-widget.js|d.ts|js.map`
6. Open the `spine-ts` folder in Visual Studio Code. VS Code will use the `tsconfig.json` file all source files from core and all

33
spine-ts/webgl/demos/demos.css
View File

@ -1,18 +1,43 @@
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Tahoma;
font-size: 11pt;
}
canvas {
position: absolute; width: 100% ;height: 100%;
body {
padding: 15px;
}
br {
display: block;
content: "";
margin-top: 15px;
}
.aspect {
margin-bottom: 15px;
max-width: 800px;
text-align: center;
}
.aspect div {
position: relative;
padding-bottom: 70.14%;
}
.aspect canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: 1px solid black;
}
.slider {
width: 50%;
width: 100%;
max-width: 800px;
border-radius: 3px;
text-align: left;
transform: translateZ(0);
background: #222;
}
.slider, .slider.filled span {
height: 15px;

24
spine-ts/webgl/demos/framebyframe.html
View File

@ -1,24 +0,0 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="frameByFrame.js"></script>
<body>
<canvas id="framebyframedemo-canvas"></canvas>
<center>
<div style="color: #fff; position: fixed; top: 0; width: 100%">
<select id="framebyframedemo-active-skeleton"></select></br>
<input id="framebyframedemo-playbutton" type="button" value="Pause"></input>
<div id="framebyframedemo-timeline" class="slider"></div>
</div>
</center>
<script>
spineDemos.loadSliders();
frameByFrameDemo(spineDemos.setupRendering);
</script>
</body>
</html>

20
spine-ts/webgl/demos/hoverboard.html Normal file
View File

@ -0,0 +1,20 @@
<html>
<title>IK Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="hoverboard.js"></script>
<body>
<center>
<div class="aspect"><div><canvas id="hoverboard-canvas"></canvas></div></div>
<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones
</center>
<script>
hoverboardDemo(spineDemos.setupRendering);
</script>
</body>
</html>

12
spine-ts/webgl/demos/ikconstraint.js → spine-ts/webgl/demos/hoverboard.js
View File

@ -1,4 +1,4 @@
var ikConstraintDemo = function(loadingComplete, bgColor) {
var hoverboardDemo = function(loadingComplete, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -9,16 +9,16 @@ var ikConstraintDemo = function(loadingComplete, bgColor) {
var timeKeeper, loadingScreen;
var target = null;
var hoverTargets = [];
var controlBones = ["hoverboard controller", "hip", "board target"];
var controlBones = ["hoverboard controller", "hip controller", "board target"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var isPlaying = true;
var DEMO_NAME = "IkConstraintDemo";
var DEMO_NAME = "HoverboardDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("ikdemo-canvas");
canvas = document.getElementById("hoverboard-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -71,7 +71,7 @@ var ikConstraintDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
var checkbox = $("#ikdemo-drawbones");
var checkbox = $("#hoverboard-drawbones");
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;

19
spine-ts/webgl/demos/ikconstraint.html
View File

@ -1,19 +0,0 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="ikconstraint.js"></script>
<body>
<canvas id="ikdemo-canvas"></canvas>
<center>
<div>Display Bones</div><input id="ikdemo-drawbones" type="checkbox"><input></div>
</center>
<script>
ikConstraintDemo(spineDemos.setupRendering);
</script>
</body>
</html>

23
spine-ts/webgl/demos/imagechanges.html Normal file
View File

@ -0,0 +1,23 @@
<html>
<title>Frame-by-frame - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="imagechanges.js"></script>
<body>
<center>
<div class="aspect"><div><canvas id="imagechanges-canvas"></canvas></div></div>
<div id="imagechanges-timeline" class="slider"></div>
<input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
<select id="imagechanges-skeleton" size="2"></select>
</center>
<script>
spineDemos.loadSliders();
imageChangesDemo(spineDemos.setupRendering);
</script>
</body>
</html>

25
spine-ts/webgl/demos/framebyframe.js → spine-ts/webgl/demos/imagechanges.js
View File

@ -1,4 +1,4 @@
var frameByFrameDemo = function(loadingComplete, bgColor) {
var imageChangesDemo = function(loadingComplete, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
@ -8,12 +8,12 @@ var frameByFrameDemo = function(loadingComplete, bgColor) {
var activeSkeleton = "Alien";
var playButton, timeLine, isPlaying = true;
var DEMO_NAME = "FrameByFrameDemo";
var DEMO_NAME = "ImageChangesDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("framebyframedemo-canvas");
canvas = document.getElementById("imagechanges-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -43,21 +43,18 @@ var frameByFrameDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
playButton = $("#framebyframedemo-playbutton");
playButton = $("#imagechanges-playbutton");
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
if (isPlaying)
playButton.addClass("pause").removeClass("play");
else
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
playButton.addClass("pause");
timeLine = $("#framebyframedemo-timeline").data("slider");
timeLine = $("#imagechanges-timeline").data("slider");
timeLine.changed = function (percent) {
if (isPlaying) playButton.click();
if (!isPlaying) {
@ -71,7 +68,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) {
}
};
var list = $("#framebyframedemo-active-skeleton");
var list = $("#imagechanges-skeleton");
for (var skeletonName in skeletons) {
var option = $("<option></option>");
option.attr("value", skeletonName).text(skeletonName);
@ -79,7 +76,7 @@ var frameByFrameDemo = function(loadingComplete, bgColor) {
list.append(option);
}
list.change(function() {
activeSkeleton = $("#framebyframedemo-active-skeleton option:selected").text();
activeSkeleton = $("#imagechanges-skeleton option:selected").text();
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
timeLine.set(active.playTime / animationDuration);

15
spine-ts/webgl/demos/meshes.html
View File

@ -1,4 +1,5 @@
<html>
<title>Meshes - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,15 +7,13 @@
<script src="meshes.js"></script>
<body>
<canvas id="meshesdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<select id="meshesdemo-active-skeleton"></select></br>
<div><input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;"></input> Draw bones</div>
<div><input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles</div>
<input id="meshesdemo-playbutton" type="button" value="Pause"></input>
<div id="meshesdemo-timeline" class="slider"></input>
</div>
<div class="aspect"><div><canvas id="meshes-canvas"></canvas></div></div>
<div id="meshes-timeline" class="slider"></div>
<input id="meshes-playbutton" type="button" value="Pause"></input><br>
<select id="meshes-skeleton" size="3"></select><br>
<input type="checkbox" id="meshes-drawbonescheckbox" style="color: #fff;"></input> Draw bones<br>
<input type="checkbox" id="meshes-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles<br>
</center>
<script>

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

@ -8,10 +8,10 @@ var meshesDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "MeshesDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("meshesdemo-canvas");
canvas = document.getElementById("meshes-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -43,21 +43,18 @@ var meshesDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
playButton = $("#meshesdemo-playbutton");
playButton = $("#meshes-playbutton");
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
if (isPlaying)
playButton.addClass("pause").removeClass("play");
else
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
playButton.addClass("pause");
timeLine = $("#meshesdemo-timeline").data("slider");
timeLine = $("#meshes-timeline").data("slider");
timeLine.changed = function (percent) {
if (isPlaying) playButton.click();
if (!isPlaying) {
@ -71,7 +68,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
}
};
var list = $("#meshesdemo-active-skeleton");
var list = $("#meshes-skeleton");
for (var skeletonName in skeletons) {
var option = $("<option></option>");
option.attr("value", skeletonName).text(skeletonName);
@ -79,20 +76,20 @@ var meshesDemo = function(loadingComplete, bgColor) {
list.append(option);
}
list.change(function() {
activeSkeleton = $("#meshesdemo-active-skeleton option:selected").text();
activeSkeleton = $("#meshes-skeleton option:selected").text();
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
timeLine.set(active.playTime / animationDuration);
})
renderer.skeletonDebugRenderer.drawBones = false;
$("#meshesdemo-drawbonescheckbox").click(function() {
$("#meshes-drawbonescheckbox").click(function() {
renderer.skeletonDebugRenderer.drawBones = this.checked;
})
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
$("#meshesdemo-drawmeshtrianglescheckbox").click(function() {
$("#meshes-drawmeshtrianglescheckbox").click(function() {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
})

24
spine-ts/webgl/demos/pathconstraint.html
View File

@ -1,24 +0,0 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="pathconstraint.js"></script>
<body>
<canvas id="pathconstraintdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<div><input id="pathconstraintdemo-drawbones" type="checkbox"></input>Display bones &amp; path</div>
<input id="pathconstraintdemo-playbutton" type="button" value="Pause"></input>
<div id="pathconstraintdemo-timeline" class="slider"></div>
</div>
</center>
<script>
spineDemos.loadSliders();
pathConstraintDemo(spineDemos.setupRendering);
</script>
</body>
</html>

13
spine-ts/webgl/demos/skins.html
View File

@ -1,4 +1,5 @@
<html>
<title>Skins - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,14 +7,12 @@
<script src="skins.js"></script>
<body>
<canvas id="skinsdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<select id="skinsdemo-active-skin"></select></br>
<button id="skinsdemo-randomizeattachments">Random Attachments</button>
<button id="skinsdemo-swingsword">Swing Sword</button>
<div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin</div>
</div>
<div class="aspect"><div><canvas id="skins-canvas"></canvas></div></div>
<select id="skins-skin"></select><br>
<button id="skins-randomizeattachments">Random Attachments</button>
<button id="skins-swingsword">Swing Sword</button><br>
<input id="skins-randomizeskins" type="checkbox" checked=true></input> Randomize skin
</center>
<script>

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

@ -7,10 +7,10 @@ var skinsDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "SkinsDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("skinsdemo-canvas");
canvas = document.getElementById("skins-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -114,7 +114,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
var list = $("#skinsdemo-active-skin");
var list = $("#skins-skin");
for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin];
if (skin.name == "default") continue;
@ -127,15 +127,15 @@ var skinsDemo = function(loadingComplete, bgColor) {
list.append(option);
}
list.change(function() {
activeSkin = $("#skinsdemo-active-skin option:selected").text();
activeSkin = $("#skins-skin option:selected").text();
skeleton.setSkinByName(activeSkin);
skeleton.setSlotsToSetupPose();
randomizeSkins.checked = false;
});
$("#skinsdemo-randomizeattachments").click(randomizeAttachments);
$("#skinsdemo-swingsword").click(swingSword);
randomizeSkins = document.getElementById("skinsdemo-randomizeskins");
$("#skins-randomizeattachments").click(randomizeAttachments);
$("#skins-swingsword").click(swingSword);
randomizeSkins = document.getElementById("skins-randomizeskins");
}
function setSkin (skin) {
@ -160,7 +160,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
}
}
setSkin(result);
$("#skinsdemo-active-skin option").filter(function() {
$("#skins-skin option").filter(function() {
return ($(this).text() == result.name);
}).prop("selected", true);
}
@ -197,7 +197,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
}
}
renderer.camera.position.x = offset.x + bounds.x * 1.5 - 150;
renderer.camera.position.x = offset.x + bounds.x * 1.5 - 125;
renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.camera.viewportWidth = bounds.x * 3;
renderer.camera.viewportHeight = bounds.y * 1.2;

25
spine-ts/webgl/demos/spritesheet.html
View File

@ -1,25 +0,0 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="spritesheet.js"></script>
<body>
<canvas id="spritesheetdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<button id="spritesheetdemo-roar">Roar</button>
<button id="spritesheetdemo-jump">Jump</button>
<br>Time multiplier
<div id="spritesheetdemo-timeslider" class="slider filled"></div>
</div>
</center>
<script>
spineDemos.loadSliders();
spritesheetDemo(spineDemos.setupRendering);
</script>
</body>
</html>

24
spine-ts/webgl/demos/spritesheets.html Normal file
View File

@ -0,0 +1,24 @@
<html>
<title>Spine vs Sprite Sheets - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="spritesheets.js"></script>
<body>
<center>
<div class="aspect"><div><canvas id="spritesheets-canvas"></canvas></div></div>
<button id="spritesheets-roar">Roar</button>
<button id="spritesheets-jump">Jump</button><br>
Time multiplier
<div id="spritesheets-timeslider" class="slider filled"></div>
</center>
<script>
spineDemos.loadSliders();
spritesheetsDemo(spineDemos.setupRendering);
</script>
</body>
</html>

62
spine-ts/webgl/demos/spritesheet.js → spine-ts/webgl/demos/spritesheets.js
View File

@ -1,4 +1,4 @@
var spritesheetDemo = function(loadingComplete, bgColor) {
var spritesheetsDemo = function(loadingComplete, bgColor) {
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);
@ -11,12 +11,12 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
var timeKeeper, loadingScreen, input;
var playTime = 0, framePlaytime = 0, clickAnim = 0;
var DEMO_NAME = "SpritesheetDemo";
var DEMO_NAME = "SpritesheetsDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("spritesheetdemo-canvas");
canvas = document.getElementById("spritesheets-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -52,6 +52,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
skeleton.x -= 60;
skeletonSeq = new spine.Skeleton(skeletonData);
walkAnim = skeletonSeq.data.findAnimation("walk");
@ -64,8 +65,8 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
setupUI();
setupInput();
$("#spritesheetdemo-overlay").removeClass("overlay-hide");
$("#spritesheetdemo-overlay").addClass("overlay");
$("#spritesheets-overlay").removeClass("overlay-hide");
$("#spritesheets-overlay").addClass("overlay");
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
@ -73,34 +74,36 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
}
}
function setupUI() {
timeSlider = $("#spritesheetdemo-timeslider").data("slider");
function setupUI () {
timeSlider = $("#spritesheets-timeslider").data("slider");
timeSlider.set(0.5);
timeSliderLabel = $("#spritesheetdemo-timeslider-label")[0];
timeSliderLabel = $("#spritesheets-timeslider-label")[0];
}
function setupInput() {
function setupInput () {
input.addListener({
down: function(x, y) {
animationState.setAnimation(0, (clickAnim++ % 2 == 0) ? "roar" : "jump", false);
animationState.addAnimation(0, "walk", true, 0);
setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump");
},
up: function(x, y) { },
moved: function(x, y) { },
dragged: function(x, y) { }
});
$("#spritesheetdemo-roar").click(function () {
animationState.setAnimation(0, "roar", false);
animationState.addAnimation(0, "walk", true, 0);
$("#spritesheets-roar").click(function () {
setAnimation("roar");
});
$("#spritesheetdemo-jump").click(function () {
animationState.setAnimation(0, "jump", false);
animationState.addAnimation(0, "walk", true, 0);
$("#spritesheets-jump").click(function () {
setAnimation("jump");
});
}
function setAnimation (name) {
animationState.setAnimation(0, name, false);
animationState.addAnimation(0, "walk", true, 0);
}
function resize () {
renderer.camera.position.x = offset.x + viewportWidth / 2 + 100;
renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
renderer.camera.position.y = offset.y + viewportHeight / 2 - 160;
renderer.camera.viewportWidth = viewportWidth * 1.2;
renderer.camera.viewportHeight = viewportHeight * 1.2;
@ -119,16 +122,12 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
var newValue = Math.round(timeSlider.get() * 100) + "%";
if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
}
var animationDuration = animationState.getCurrent(0).animation.duration;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
}
walkLastTimePrecise += delta;
while (walkLastTimePrecise - walkLastTime > 1 / FPS) {
@ -138,15 +137,20 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
}
skeletonSeq.updateWorldTransform();
animationState.update(delta);
var current = animationState.getCurrent(0);
if (current.animation.name == "walk") current.time = walkLastTimePrecise;
animationState.apply(skeleton);
skeleton.updateWorldTransform();
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
var frame = frames[currFrame];
renderer.begin();
var frame = frames[currFrame];
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeletonSeq, true);
renderer.end();
renderer.end();
}
init();

21
spine-ts/webgl/demos/stretchy.html
View File

@ -1,21 +0,0 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="stretchy.js"></script>
<body>
<canvas id="stretchydemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<div><input id="stretchydemo-drawbones" type="checkbox"></input> Display bones</div>
</div>
</center>
<script>
stretchyDemo(spineDemos.setupRendering);
</script>
</body>
</html>

20
spine-ts/webgl/demos/stretchyman.html Normal file
View File

@ -0,0 +1,20 @@
<html>
<title>Strechyman - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="stretchyman.js"></script>
<body>
<center>
<div class="aspect"><div><canvas id="stretchyman-canvas"></canvas></div></div>
<input id="stretchyman-drawbones" type="checkbox"></input> Display bones
</center>
<script>
stretchymanDemo(spineDemos.setupRendering);
</script>
</body>
</html>

61
spine-ts/webgl/demos/stretchy.js → spine-ts/webgl/demos/stretchyman.js
View File

@ -1,4 +1,4 @@
var stretchyDemo = function(loadingComplete, bgColor) {
var stretchymanDemo = function(loadingComplete, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -21,12 +21,12 @@ var stretchyDemo = function(loadingComplete, bgColor) {
var kneePos = new spine.Vector2();
var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
var DEMO_NAME = "StretchyDemo";
var DEMO_NAME = "StretchymanDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("stretchydemo-canvas");
canvas = document.getElementById("stretchyman-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -79,7 +79,7 @@ var stretchyDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
var checkbox = $("#stretchydemo-drawbones");
var checkbox = $("#stretchyman-drawbones");
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() {
@ -105,18 +105,16 @@ var stretchyDemo = function(loadingComplete, bgColor) {
dragged: function(x, y) {
if (target != null) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
var yOnly = target.data.name === "head controller" || target.data.name === "hip controller";
if (target.parent !== null) {
if (target.parent !== null)
target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
if (!yOnly) target.x = temp2.x;
target.y = temp2.y;
} else {
if (!yOnly) target.x = coords.x - skeleton.x;
target.y = coords.y - skeleton.y;
}
if (target.data.name === "hip controller") {
var head = skeleton.findBone("head controller");
else
temp2.set(coords.x - skeleton.x, coords.y - skeleton.y);
target.x = temp2.x;
target.y = temp2.y;
if (target.data.name === "head controller") {
var hipControl = skeleton.findBone("hip controller");
target.x = spine.MathUtils.clamp(target.x, -65, 65);
target.y = Math.max(260, target.y);
}
}
},
@ -134,22 +132,24 @@ var stretchyDemo = function(loadingComplete, bgColor) {
});
}
function center(middleBone, hipBone, footBone) {
function center (middleBone, hipBone, footBone, amount, dir) {
temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0)
.sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0));
var dist = Math.sqrt(temp.x * temp.x + temp.y * temp.y);
temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0);
temp.scale(0.5).add(temp3);
middleBone.parent.worldToLocal(kneePos.set(temp.x, temp.y));
middleBone.x = kneePos.x;
middleBone.y = kneePos.y;
middleBone.y = kneePos.y;
middleBone.children[0].y = (22 + Math.max(0, amount - dist * 0.3)) * dir;
}
var rotate = function(handBone, elbowBone) {
// can do all this in world space cause handBone is essentially in world space
var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.webgl.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180;
function rotate (handBone, elbowBone) {
// can do all this in world space cause handBone is essentially in world space
var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.webgl.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180;
if (v.y < 0) angle = 360 - angle;
handBone.rotation = angle;
handBone.rotation = angle;
}
function render () {
@ -158,12 +158,17 @@ var stretchyDemo = function(loadingComplete, bgColor) {
state.update(delta);
state.apply(skeleton);
center(skeleton.findBone("back leg middle"), skeleton.findBone("back leg 1"), skeleton.findBone("back leg controller"));
center(skeleton.findBone("front leg middle"), skeleton.findBone("front leg 1"), skeleton.findBone("front leg controller"));
center(skeleton.findBone("front arm middle"), skeleton.findBone("front arm 1"), skeleton.findBone("front arm controller"));
center(skeleton.findBone("back arm middle"), skeleton.findBone("back arm 1"), skeleton.findBone("back arm controller"));
center(skeleton.findBone("back leg middle"), skeleton.findBone("back leg 1"), skeleton.findBone("back leg controller"), 65, 1);
center(skeleton.findBone("front leg middle"), skeleton.findBone("front leg 1"), skeleton.findBone("front leg controller"), 65, 1);
center(skeleton.findBone("front arm middle"), skeleton.findBone("front arm 1"), skeleton.findBone("front arm controller"), 90, -1);
center(skeleton.findBone("back arm middle"), skeleton.findBone("back arm 1"), skeleton.findBone("back arm controller"), 90, -1);
rotate(skeleton.findBone("front arm controller"), skeleton.findBone("front arm elbow"));
rotate(skeleton.findBone("back arm controller"), skeleton.findBone("back arm elbow"));
rotate(skeleton.findBone("back arm controller"), skeleton.findBone("back arm elbow"));
var headControl = skeleton.findBone("head controller"), hipControl = skeleton.findBone("hip controller")
var head = skeleton.findBone("head");
var angle = Math.atan2(headControl.worldY - hipControl.worldY, headControl.worldX - hipControl.worldX) * spine.MathUtils.radDeg;
angle = (angle - 90) * 2.5;
head.rotation = head.data.rotation + Math.min(90, Math.abs(angle)) * Math.sign(angle);
skeleton.updateWorldTransform();
renderer.camera.viewportWidth = bounds.x * 1.2;

11
spine-ts/webgl/demos/tank.html
View File

@ -1,4 +1,5 @@
<html>
<title>Tank - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,13 +7,11 @@
<script src="tank.js"></script>
<body>
<canvas id="tankdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<div><input id="tankdemo-drawbones" type="checkbox"></input> Display bones</div>
<input id="tankdemo-playbutton" type="button" value="Pause"></input>
<div id="tankdemo-timeline" class="slider"></input>
</div>
<div class="aspect"><div><canvas id="tank-canvas"></canvas></div></div>
<div id="tank-timeline" class="slider"></div>
<input id="tank-playbutton" type="button" value="Pause"></input><br>
<input id="tank-drawbones" type="checkbox"></input> Display bones
</center>
<script>

19
spine-ts/webgl/demos/tank.js
View File

@ -6,10 +6,10 @@ var tankDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "TankDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("tankdemo-canvas");
canvas = document.getElementById("tank-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -59,21 +59,18 @@ var tankDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
playButton = $("#tankdemo-playbutton");
playButton = $("#tank-playbutton");
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
if (isPlaying)
playButton.addClass("pause").removeClass("play");
else
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
playButton.addClass("pause");
timeLine = $("#tankdemo-timeline").data("slider");
timeLine = $("#tank-timeline").data("slider");
timeLine.changed = function (percent) {
if (isPlaying) playButton.click();
if (!isPlaying) {
@ -88,7 +85,7 @@ var tankDemo = function(loadingComplete, bgColor) {
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
$("#tankdemo-drawbones").change(function() {
$("#tank-drawbones").change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});

25
spine-ts/webgl/demos/transformconstraint.html
View File

@ -1,25 +0,0 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="transformconstraint.js"></script>
<body>
<canvas id="transformdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
Rotation offset
<div id="transformdemo-rotationoffset" class="slider filled"></div>
Translation mix
<div id="transformdemo-translationmix" class="slider filled"></div>
</div>
</center>
<script>
spineDemos.loadSliders();
transformConstraintDemo(spineDemos.setupRendering);
</script>
</body>
</html>

24
spine-ts/webgl/demos/transforms.html Normal file
View File

@ -0,0 +1,24 @@
<html>
<title>Transform Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="transforms.js"></script>
<body>
<center>
<div class="aspect"><div><canvas id="transforms-canvas"></canvas></div></div>
Rotation offset
<div id="transforms-rotationoffset" class="slider filled"></div><br>
Translation mix
<div id="transforms-translationmix" class="slider filled"></div>
</center>
<script>
spineDemos.loadSliders();
transformsDemo(spineDemos.setupRendering);
</script>
</body>
</html>

22
spine-ts/webgl/demos/transformconstraint.js → spine-ts/webgl/demos/transforms.js
View File

@ -1,4 +1,4 @@
var transformConstraintDemo = function(loadingComplete, bgColor) {
var transformsDemo = function(loadingComplete, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -15,12 +15,12 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
var lastRotation = 0;
var mix, lastOffset = 0, lastMix = 0.5;
var DEMO_NAME = "TransformConstraintDemo";
var DEMO_NAME = "TransformsDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("transformdemo-canvas");
canvas = document.getElementById("transforms-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -45,7 +45,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transformConstraint);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
@ -75,27 +75,27 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
var rotationOffset = $("#transformdemo-rotationoffset").data("slider");
var rotationOffset = $("#transforms-rotationoffset").data("slider");
rotationOffset.changed = function (percent) {
var val = percent * 360 - 180;
var delta = val - lastOffset;
lastOffset = val;
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
$("#transformdemo-rotationoffset-label").text(Math.round(val) + "°");
$("#transforms-rotationoffset-label").text(Math.round(val) + "°");
};
$("#transformdemo-rotationoffset-label").text("0°");
$("#transforms-rotationoffset-label").text("0°");
var translationMix = $("#transformdemo-translationmix").data("slider");
var translationMix = $("#transforms-translationmix").data("slider");
translationMix.set(0.5);
translationMix.changed = function (percent) {
var val = percent;
var delta = val - lastMix;
lastMix = val;
skeleton.findTransformConstraint("wheel1").translateMix += delta;
$("#transformdemo-translationmix-label").text(Math.round(val * 100) + "%");
$("#transforms-translationmix-label").text(Math.round(val * 100) + "%");
};
$("#transformdemo-translationmix-label").text("50%");
$("#transforms-translationmix-label").text("50%");
}
function setupInput() {

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

@ -1,4 +1,5 @@
<html>
<title>Transitions - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
@ -6,12 +7,10 @@
<script src="transitions.js"></script>
<body>
<canvas id="transitionsdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
Time multiplier
<div id="transitionsdemo-timeslider" class="slider"></div></br>
</div>
<div class="aspect"><div><canvas id="transitions-canvas"></canvas></div></div>
Time multiplier
<div id="transitions-timeslider" class="slider filled"></div>
</center>
<script>

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

@ -9,13 +9,13 @@ var transitionsDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "TransitionsDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
timeSlider = $("#transitionsdemo-timeslider").data("slider");
timeSlider = $("#transitions-timeslider").data("slider");
timeSlider.set(0.5);
timeSliderLabel = $("#transitionsdemo-timeslider-label")[0];
canvas = document.getElementById("transitionsdemo-canvas");
timeSliderLabel = $("#transitions-timeslider-label")[0];
canvas = document.getElementById("transitions-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -50,8 +50,8 @@ var transitionsDemo = function(loadingComplete, bgColor) {
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
skeleton.getBounds(bounds.offset, bounds.size);
setupInput();
$("#transitionsdemo-overlay").removeClass("overlay-hide");
$("#transitionsdemo-overlay").addClass("overlay");
$("#transitions-overlay").removeClass("overlay-hide");
$("#transitions-overlay").addClass("overlay");
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
@ -133,13 +133,13 @@ var transitionsDemo = function(loadingComplete, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.x = -60;
skeleton.x = -10;
renderer.drawSkeleton(skeleton, true);
stateNoMix.update(delta);
stateNoMix.apply(skeletonNoMix);
skeletonNoMix.updateWorldTransform();
skeletonNoMix.x = size.x + 60;
skeletonNoMix.x = size.x + 45;
renderer.drawSkeleton(skeletonNoMix, true);
renderer.end();
}

23
spine-ts/webgl/demos/vine.html Normal file
View File

@ -0,0 +1,23 @@
<html>
<title>Path Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="vine.js"></script>
<body>
<center>
<div class="aspect"><div><canvas id="vine-canvas"></canvas></div></div>
<div id="vine-timeline" class="slider"></div>
<input id="vine-playbutton" type="button" value="Pause"></input><br>
<input id="vine-drawbones" type="checkbox"></input> Display bones &amp; path
</center>
<script>
spineDemos.loadSliders();
vineDemo(spineDemos.setupRendering);
</script>
</body>
</html>

23
spine-ts/webgl/demos/pathconstraint.js → spine-ts/webgl/demos/vine.js
View File

@ -1,4 +1,4 @@
var pathConstraintDemo = function(loadingComplete, bgColor) {
var vineDemo = function(loadingComplete, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -13,12 +13,12 @@ var pathConstraintDemo = function(loadingComplete, bgColor) {
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var playButton, timeLine, isPlaying = true, playTime = 0;
var DEMO_NAME = "PathConstraintDemo";
var DEMO_NAME = "VineDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("pathconstraintdemo-canvas");
canvas = document.getElementById("vine-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -72,21 +72,18 @@ var pathConstraintDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
playButton = $("#pathconstraintdemo-playbutton");
playButton = $("#vine-playbutton");
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
if (isPlaying)
playButton.addClass("pause").removeClass("play");
else
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
playButton.addClass("pause");
timeLine = $("#pathconstraintdemo-timeline").data("slider");
timeLine = $("#vine-timeline").data("slider");
timeLine.changed = function (percent) {
if (isPlaying) playButton.click();
if (!isPlaying) {
@ -101,7 +98,7 @@ var pathConstraintDemo = function(loadingComplete, bgColor) {
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
var checkbox = $("#pathconstraintdemo-drawbones");
var checkbox = $("#vine-drawbones");
checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;

94
spine-unity/Assets/spine-unity/Asset Types/Editor/AtlasAssetInspector.cs
View File

@ -29,6 +29,7 @@
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
//#define BAKE_ALL_BUTTON
//#define REGION_BAKING_MESH
using System;
using System.Collections.Generic;
@ -44,8 +45,6 @@ namespace Spine.Unity.Editor {
public class AtlasAssetInspector : UnityEditor.Editor {
private SerializedProperty atlasFile, materials;
private AtlasAsset atlasAsset;
private List<bool> baked;
private List<GameObject> bakedObjects;
void OnEnable () {
SpineEditorUtilities.ConfirmInitialization();
@ -53,8 +52,14 @@ namespace Spine.Unity.Editor {
materials = serializedObject.FindProperty("materials");
materials.isExpanded = true;
atlasAsset = (AtlasAsset)target;
#if REGION_BAKING_MESH
UpdateBakedList();
#endif
}
#if REGION_BAKING_MESH
private List<bool> baked;
private List<GameObject> bakedObjects;
void UpdateBakedList () {
AtlasAsset asset = (AtlasAsset)target;
@ -78,13 +83,73 @@ namespace Spine.Unity.Editor {
}
}
}
#endif
static public void UpdateSpriteSlices (Texture texture, Atlas atlas) {
string texturePath = AssetDatabase.GetAssetPath(texture.GetInstanceID());
var t = (TextureImporter)TextureImporter.GetAtPath(texturePath);
t.spriteImportMode = SpriteImportMode.Multiple;
var spriteSheet = t.spritesheet;
var sprites = new List<SpriteMetaData>(spriteSheet);
FieldInfo field = typeof(Atlas).GetField("regions", BindingFlags.Instance | BindingFlags.NonPublic);
var regions = (List<AtlasRegion>)field.GetValue(atlas);
int textureHeight = texture.height;
char[] FilenameDelimiter = {'.'};
int updatedCount = 0;
int addedCount = 0;
foreach (var r in regions) {
int width, height;
if (r.rotate) {
width = r.height;
height = r.width;
} else {
width = r.width;
height = r.height;
}
int x = r.x;
int y = textureHeight - height - r.y;
string pageName = r.page.name.Split(FilenameDelimiter, StringSplitOptions.RemoveEmptyEntries)[0];
string textureName = texture.name;
bool pageMatch = string.Equals(pageName, textureName,StringComparison.Ordinal);
int spriteIndex = pageMatch ? sprites.FindIndex(
(s) => string.Equals(s.name, r.name, StringComparison.Ordinal)
) : -1;
bool matchFound = spriteIndex >= 0;
if (matchFound) {
var s = sprites[spriteIndex];
s.rect = new Rect(x, y, width, height);
sprites[spriteIndex] = s;
updatedCount++;
} else {
if (pageMatch) {
sprites.Add(new SpriteMetaData {
name = r.name,
pivot = new Vector2(0.5f, 0.5f),
rect = new Rect(x, y, width, height)
});
addedCount++;
}
}
}
t.spritesheet = sprites.ToArray();
EditorUtility.SetDirty(t);
AssetDatabase.ImportAsset(texturePath, ImportAssetOptions.ForceUpdate);
EditorGUIUtility.PingObject(texture);
Debug.Log(string.Format("Applied sprite slices to {2}. {0} added. {1} updated.", addedCount, updatedCount, texture.name));
}
override public void OnInspectorGUI () {
serializedObject.Update();
AtlasAsset asset = (AtlasAsset)target;
atlasAsset = atlasAsset ?? (AtlasAsset)target;
EditorGUI.BeginChangeCheck();
EditorGUILayout.PropertyField(atlasFile);
EditorGUILayout.PropertyField(materials, true);
if (EditorGUI.EndChangeCheck())
serializedObject.ApplyModifiedProperties();
@ -103,6 +168,22 @@ namespace Spine.Unity.Editor {
}
}
if (atlasFile.objectReferenceValue != null) {
if (GUILayout.Button(
new GUIContent(
"Apply Regions as Texture Sprite Slices",
"Adds Sprite slices to atlas texture(s). " +
"Updates existing slices if ones with matching names exist. \n\n" +
"If your atlas was exported with Premultiply Alpha, " +
"your SpriteRenderer should use the generated Spine _Material asset (or any Material with a PMA shader) instead of Sprites-Default.")
, GUILayout.Height(70f))) {
var atlas = atlasAsset.GetAtlas();
foreach (var m in atlasAsset.materials)
UpdateSpriteSlices(m.mainTexture, atlas);
}
}
#if REGION_BAKING_MESH
if (atlasFile.objectReferenceValue != null) {
Atlas atlas = asset.GetAtlas();
FieldInfo field = typeof(Atlas).GetField("regions", BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.NonPublic);
@ -206,13 +287,14 @@ namespace Spine.Unity.Editor {
}
#endif
}
#endif
if (serializedObject.ApplyModifiedProperties() ||
(UnityEngine.Event.current.type == EventType.ValidateCommand && UnityEngine.Event.current.commandName == "UndoRedoPerformed")
) {
asset.Reset();
atlasAsset.Reset();
}
}
}

1
spine-unity/Assets/spine-unity/Mesh Generation/ISubmeshedMeshGenerator.cs
View File

@ -28,6 +28,7 @@ namespace Spine.Unity.MeshGeneration {
MeshAndMaterials GenerateMesh (ExposedList<SubmeshInstruction> instructions, int startSubmesh, int endSubmesh);
float ZSpacing { get; set; }
bool PremultiplyVertexColors { get; set; }
bool AddNormals { get; set; }
bool AddTangents { get; set; }
}

2
spine-unity/Assets/spine-unity/Modules/SkeletonRenderSeparator/SkeletonRenderSeparator.cs
View File

@ -137,6 +137,7 @@ namespace Spine.Unity.Modules {
var currentRenderer = partsRenderers[rendererIndex];
bool addNormals = skeletonRenderer.calculateNormals;
bool addTangents = skeletonRenderer.calculateTangents;
bool pmaVertexColors = skeletonRenderer.pmaVertexColors;
for (int si = 0, start = 0; si <= lastSubmeshInstruction; si++) {
if (submeshInstructionsItems[si].forceSeparate || si == lastSubmeshInstruction) {
@ -144,6 +145,7 @@ namespace Spine.Unity.Modules {
var meshGenerator = currentRenderer.MeshGenerator;
meshGenerator.AddNormals = addNormals;
meshGenerator.AddTangents = addTangents;
meshGenerator.PremultiplyVertexColors = pmaVertexColors;
if (copyPropertyBlock)
currentRenderer.SetPropertyBlock(copiedBlock);