[ts] Merged with master.

This commit is contained in:
badlogic 2017-03-07 11:57:19 +01:00
commit 1bb212a110
10 changed files with 183 additions and 30 deletions

View File

@ -1626,6 +1626,7 @@ declare module spine {
animation: string;
imagesPath: string;
atlasPages: string[];
atlasPagesContent: string[];
skin: string;
loop: boolean;
scale: number;

View File

@ -8447,13 +8447,25 @@ var spine;
this.debugShader = spine.webgl.Shader.newColored(gl);
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
this.shapes = new spine.webgl.ShapeRenderer(gl);
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
if (!config.atlasContent)
var assets = this.assetManager = new spine.webgl.AssetManager(gl, config.imagesPath ? config.imagesPath : "");
if (!config.atlasContent) {
assets.loadText(config.atlas);
if (!config.jsonContent)
}
if (!config.jsonContent) {
assets.loadText(config.json);
}
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
if (config.atlas) {
var atlasPage = config.atlas.replace(".atlas", ".png");
if (atlasPage.lastIndexOf(config.imagesPath) == 0) {
atlasPage = atlasPage.substr(config.imagesPath.length);
}
assets.loadTexture(atlasPage);
}
else {
var firstLine = config.atlasContent.trim().split("\n")[0];
assets.loadTexture(firstLine);
}
}
else {
for (var i = 0; i < config.atlasPages.length; i++) {
@ -8484,14 +8496,25 @@ var spine;
if (!config.backgroundColor)
config.backgroundColor = "#555555";
if (!config.imagesPath) {
var index = config.atlas.lastIndexOf("/");
if (index != -1) {
config.imagesPath = config.atlas.substr(0, index) + "/";
if (config.atlas) {
var index = config.atlas.lastIndexOf("/");
if (index != -1) {
config.imagesPath = config.atlas.substr(0, index) + "/";
}
else {
config.imagesPath = "";
}
}
else {
config.imagesPath = "";
}
}
if (config.json && config.json.lastIndexOf(config.imagesPath) == 0) {
config.json = config.json.substr(config.imagesPath.length);
}
if (config.atlas && config.atlas.lastIndexOf(config.imagesPath) == 0) {
config.atlas = config.atlas.substr(config.imagesPath.length);
}
if (!config.premultipliedAlpha === undefined)
config.premultipliedAlpha = false;
if (!config.debug === undefined)
@ -8515,7 +8538,7 @@ var spine;
}
var atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) : config.atlasContent;
var atlas = new spine.TextureAtlas(atlasContent, function (path) {
var texture = assetManager.get(imagesPath + path);
var texture = assetManager.get(path);
return texture;
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
@ -8534,7 +8557,7 @@ var spine;
skeleton.y = config.y;
}
var animationState = this.state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
animationState.setAnimation(0, config.animation, true);
animationState.setAnimation(0, config.animation, config.loop);
if (config.success)
config.success(this);
this.loaded = true;

File diff suppressed because one or more lines are too long

View File

@ -1547,6 +1547,7 @@ declare module spine {
animation: string;
imagesPath: string;
atlasPages: string[];
atlasPagesContent: string[];
skin: string;
loop: boolean;
scale: number;

View File

@ -7915,13 +7915,25 @@ var spine;
this.debugShader = spine.webgl.Shader.newColored(gl);
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
this.shapes = new spine.webgl.ShapeRenderer(gl);
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
if (!config.atlasContent)
var assets = this.assetManager = new spine.webgl.AssetManager(gl, config.imagesPath ? config.imagesPath : "");
if (!config.atlasContent) {
assets.loadText(config.atlas);
if (!config.jsonContent)
}
if (!config.jsonContent) {
assets.loadText(config.json);
}
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
if (config.atlas) {
var atlasPage = config.atlas.replace(".atlas", ".png");
if (atlasPage.lastIndexOf(config.imagesPath) == 0) {
atlasPage = atlasPage.substr(config.imagesPath.length);
}
assets.loadTexture(atlasPage);
}
else {
var firstLine = config.atlasContent.trim().split("\n")[0];
assets.loadTexture(firstLine);
}
}
else {
for (var i = 0; i < config.atlasPages.length; i++) {
@ -7952,14 +7964,25 @@ var spine;
if (!config.backgroundColor)
config.backgroundColor = "#555555";
if (!config.imagesPath) {
var index = config.atlas.lastIndexOf("/");
if (index != -1) {
config.imagesPath = config.atlas.substr(0, index) + "/";
if (config.atlas) {
var index = config.atlas.lastIndexOf("/");
if (index != -1) {
config.imagesPath = config.atlas.substr(0, index) + "/";
}
else {
config.imagesPath = "";
}
}
else {
config.imagesPath = "";
}
}
if (config.json && config.json.lastIndexOf(config.imagesPath) == 0) {
config.json = config.json.substr(config.imagesPath.length);
}
if (config.atlas && config.atlas.lastIndexOf(config.imagesPath) == 0) {
config.atlas = config.atlas.substr(config.imagesPath.length);
}
if (!config.premultipliedAlpha === undefined)
config.premultipliedAlpha = false;
if (!config.debug === undefined)
@ -7983,7 +8006,7 @@ var spine;
}
var atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) : config.atlasContent;
var atlas = new spine.TextureAtlas(atlasContent, function (path) {
var texture = assetManager.get(imagesPath + path);
var texture = assetManager.get(path);
return texture;
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
@ -8002,7 +8025,7 @@ var spine;
skeleton.y = config.y;
}
var animationState = this.state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
animationState.setAnimation(0, config.animation, true);
animationState.setAnimation(0, config.animation, config.loop);
if (config.success)
config.success(this);
this.loaded = true;

File diff suppressed because one or more lines are too long

View File

@ -41,7 +41,7 @@ function init () {
gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
shader = spine.webgl.Shader.newColoredTextured(gl);
shader = spine.webgl.Shader.newTwoColoredTextured(gl);
batcher = new spine.webgl.PolygonBatcher(gl);
mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -9,8 +9,67 @@
<div style="margin-bottom: 20px; width: 100%; height: 150px;" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="Jump" data-fit-to-canvas="false" data-scale="0.1" data-x="200" data-y="10"></div>
<!-- Or make things real small -->
<div style="margin-bottom: 20px; width: 320px; height: 240px;" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="walk" data-background-color="#cc0000"></div>
<!-- You can also specify the .JSON and .atlas files inline to reduce the number of requests made to the server -->
<div id="spine-widget-inline" style="margin-bottom: 20px; width: 640px; height: 480px;"></div>
</center>
</body>
<script id="atlas" type="text/plain">
spine-logo.png
size: 128,64
format: RGBA8888
filter: Linear,Linear
repeat: none
logo
rotate: false
xy: 2, 2
size: 104, 32
orig: 104, 32
offset: 0, 0
index: -1
</script>
<script id="atlasPage" type="text/plain">
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABACAYAAADS1n9/AAAFLElEQVR42u2bTWhVRxTH//myJtTmGT+SYEvTFGvTRBOTV8tLbXwL0e3bZCEiBtRuzUa6ElJX2QgKiqibiG4MfiSCiHaToohowQQEUShY/MCNNQUXLtSUs7gwDHPvzLx737svef8fDNHk3nnnnPnP3DNn7gMIIWTR0NKAlpPrcXKqB1Py80A7DvSvQH9DDRoYnSpgvBPjC3ks6O3DNnx4NYhXc1nM3dmMO5PdmDz4JQ4ur8VyRm0Jcbkbl00CCGsn1uMEo7aEuNSNSz4CmOnDDKNWBH19fQOjo6O/qU1+53p/Pp/fLq2jo6Mzqt9CoTDsY9fhr3HYRwAXunDBp/8wu8XOOHab0Pv0jXHJBn5qavqP+fn/FkxtZubPv2xGSgCD68WpoF+519Tns2f//Osa0NZlaH3zM964CmDXWuzyGfzApomJc5OB3bOzc38XGwsTEhPxOSzGEv9UhCCq1w0T5/UABIPqKoCRkZFfw5xVm6sIJOt/sgVPbIP/MIuHPrsD1W4ZBBe7JTaZTGal62ccO3b8tEssZBzKLgLVOJkB6jIoTkpAxGEfAaizXu6VPoJlVp8J8m/XYNbXoH54DYbPd+H805/w9P0Q3gcD/3Yr3p7ZgDOrGrDKd/lXbQmzW2LjMyHUma/2L/9X/dVXX19xxUZ1KuyD5fc2o9RAqjPKdJ9+rWswTTTXozlTj0yx95vslsE22a2KQAbTZXVV+5XPCrtWnTRx4hFLAHH60QMpDrmuPLZrS4lut4jWdUBty/XY2O/jwbXiry05TCUePg75BNK2YqgOxxVfkgKw2a3mRlEz2vfaJCejF/qyJs+9JAKZ5PIo5L5A7sYm3Li9Gbevb8T1iz/gohSI7vXj3sscXs5vxfz9AdyPkwO42K0+r202+w5oUpPRewto2gXoyUrSgdQdtgXzag+uumwBd7didyUIwPRosTWfeCQuAtO+15S1piWA6R5ML2YB+LZUagKy/JsKNyIOn0JQKQRw5BscsQ3+pzw+dTaisxIFoFf/olqxj+FEVwS9eGHLTEstAKkGvsjhRZQAxjowVurcpVgBLMqzAb0qlqTDIjKf7FtY9xnWnd2As68H8VotAF3biGs7WrCjHMmrqwDEH7Vf/Zxh0aA6HFWg0ANpc1itkMkjxteupjo0NdaiMeltYJK7ADWvSn1ZT0IAUU6YCkFRlUU1OLYiSTnrAEkKQC0EpVnsiizGSPDDZqsMlLpFjEoETVmvOG3qW88v4ma8ckaQXYFsYTUKlZIEmmodLkKXSVa2HUCwDMsgi3EiiODwIzgEcimRRm17pG+ZCcE5uL7flb/52l1Xg7p97dg38T0m7vbj7rtf8C7ICaQgJOcDlSAA/VGn1liCOAexlvgHk61sZwGuR7ZimO2ZrgdSBjzq/Nv2mIhiZwt2Ru0GfBLCUgvAtOLZWlkPg8L2/urKUGwhKOxFk6DAVKzNg80YjBLA9pVwrqKpuxGXEz61dO5TrZNro166kc+WvlNLFmWQ1WXJtxQZNZMkyMX2a6K2BrWzWcyaBv9KD67II6JSk2pTnFN/JSyNbDoubcvQduo7nHowgAe3enHr6Lc4OpTBEEh1CIBQAIQCIFUtgN7P0Ssvhz76EY/kq2GPt+Dx8xyeH/oKhzgiZUZ9vbxcZc+9bdhr2gnIN4k4IlVAVxO6Pm7DR10A+9uxn9GpEqQqKO8IyjeEb27CzT2t2MOoEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQpYG/wPiudlO23hTHQAAAABJRU5ErkJggg==
</script>
<script id="json" type="text/plain">
{
"skeleton": { "hash": "MYXtB/H4Z2fp6J+/XZiyN+f9Hfc", "spine": "3.5.49", "width": 104, "height": 32, "images": "" },
"bones": [
{ "name": "root" }
],
"slots": [
{ "name": "spine-logo", "bone": "root", "attachment": "logo" }
],
"skins": {
"default": {
"spine-logo": {
"logo": { "width": 104, "height": 32 }
}
}
},
"animations": {
"animation": {
"bones": {
"root": {
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.8333, "angle": 39.96 },
{ "time": 1.6667, "angle": 0 }
],
"scale": [
{ "time": 0, "x": 1, "y": 1 },
{ "time": 0.8333, "x": 3, "y": 3 },
{ "time": 1.6667, "x": 1, "y": 1 }
]
}
}
}
}
}
</script>
<script>
new spine.SpineWidget("spine-widget", {
json: "assets/spineboy.json",
@ -28,6 +87,28 @@ new spine.SpineWidget("spine-widget", {
}
}
});
json = document.getElementById("json").innerHTML;
atlas = document.getElementById("atlas").innerHTML;
new spine.SpineWidget("spine-widget-inline", {
jsonContent: json,
atlasContent: atlas,
imagesPath: "assets/",
animation: "animation",
backgroundColor: "#00000000",
debug: true,
success: function (widget) {
var animIndex = 0;
widget.canvas.onclick = function () {
animIndex++;
let animations = widget.skeleton.data.animations;
if (animIndex >= animations.length) animIndex = 0;
widget.setAnimation(animations[animIndex].name);
}
}
});
</script>
</body>
</html>

View File

@ -77,11 +77,24 @@ module spine {
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
this.shapes = new spine.webgl.ShapeRenderer(gl);
let assets = this.assetManager = new spine.webgl.AssetManager(gl);
if (!config.atlasContent) assets.loadText(config.atlas);
if (!config.jsonContent) assets.loadText(config.json);
let assets = this.assetManager = new spine.webgl.AssetManager(gl, config.imagesPath ? config.imagesPath : "");
if (!config.atlasContent) {
assets.loadText(config.atlas);
}
if (!config.jsonContent) {
assets.loadText(config.json);
}
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
if (config.atlas) {
var atlasPage = config.atlas.replace(".atlas", ".png");
if (atlasPage.lastIndexOf(config.imagesPath) == 0) {
atlasPage = atlasPage.substr(config.imagesPath.length);
}
assets.loadTexture(atlasPage);
} else {
let firstLine = config.atlasContent.trim().split("\n")[0];
assets.loadTexture(firstLine);
}
} else {
for (let i = 0; i < config.atlasPages.length; i++) {
assets.loadTexture(config.atlasPages[i]);
@ -103,13 +116,23 @@ module spine {
if (config.fitToCanvas === undefined) config.fitToCanvas = true;
if (!config.backgroundColor) config.backgroundColor = "#555555";
if (!config.imagesPath) {
let index = config.atlas.lastIndexOf("/");
if (index != -1) {
config.imagesPath = config.atlas.substr(0, index) + "/";
if (config.atlas) {
let index = config.atlas.lastIndexOf("/");
if (index != -1) {
config.imagesPath = config.atlas.substr(0, index) + "/";
} else {
config.imagesPath = "";
}
} else {
config.imagesPath = "";
}
}
if (config.json && config.json.lastIndexOf(config.imagesPath) == 0) {
config.json = config.json.substr(config.imagesPath.length);
}
if (config.atlas && config.atlas.lastIndexOf(config.imagesPath) == 0) {
config.atlas = config.atlas.substr(config.imagesPath.length);
}
if (!config.premultipliedAlpha === undefined) config.premultipliedAlpha = false;
if (!config.debug === undefined) config.debug = false;
if (!config.alpha === undefined) config.alpha = true;
@ -129,7 +152,7 @@ module spine {
let atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) as string : config.atlasContent;
let atlas = new spine.TextureAtlas(atlasContent, (path: string) => {
let texture = assetManager.get(imagesPath + path) as spine.webgl.GLTexture;
let texture = assetManager.get(path) as spine.webgl.GLTexture;
return texture;
});
@ -152,7 +175,7 @@ module spine {
}
var animationState = this.state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
animationState.setAnimation(0, config.animation, true);
animationState.setAnimation(0, config.animation, config.loop);
if (config.success) config.success(this);
this.loaded = true;
requestAnimationFrame(() => { this.render(); });
@ -315,6 +338,7 @@ module spine {
animation: string;
imagesPath: string;
atlasPages: string[];
atlasPagesContent: string[];
skin = "default";
loop = true;
scale = 1.0;