feat: use custom player module
This commit is contained in:
Haoyu Xu
214
apps/module/spine-ts/webgl/demos/skins.js
Executable file
214
apps/module/spine-ts/webgl/demos/skins.js
Executable file
@@ -0,0 +1,214 @@
|
||||
var skinsDemo = function(canvas, bgColor) {
|
||||
var canvas, gl, renderer, input, assetManager;
|
||||
var skeleton, state, offset, bounds;
|
||||
var timeKeeper, loadingScreen;
|
||||
var playButton, timeLine, isPlaying = true, playTime = 0;
|
||||
var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
|
||||
|
||||
var DEMO_NAME = "SkinsDemo";
|
||||
|
||||
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
|
||||
|
||||
function init () {
|
||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
||||
gl = canvas.ctx.gl;
|
||||
|
||||
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
||||
assetManager = spineDemos.assetManager;
|
||||
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
|
||||
assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes.png");
|
||||
assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes2.png");
|
||||
assetManager.loadText(DEMO_NAME, "heroes.atlas");
|
||||
assetManager.loadJson(DEMO_NAME, "demos.json");
|
||||
input = new spine.webgl.Input(canvas);
|
||||
timeKeeper = new spine.TimeKeeper();
|
||||
}
|
||||
|
||||
function loadingComplete () {
|
||||
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
|
||||
return assetManager.get(DEMO_NAME, path);
|
||||
});
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
||||
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
|
||||
skeleton = new spine.Skeleton(skeletonData);
|
||||
skeleton.setSkinByName("Assassin");
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.defaultMix = 0.2;
|
||||
stateData.setMix("roll", "run", 0);
|
||||
stateData.setMix("jump", "run2", 0);
|
||||
state = new spine.AnimationState(stateData);
|
||||
setupAnimations(state);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds, []);
|
||||
setupUI();
|
||||
setupInput();
|
||||
}
|
||||
|
||||
function setupInput (){
|
||||
input.addListener({
|
||||
down: function(x, y) {
|
||||
swingSword();
|
||||
},
|
||||
up: function(x, y) { },
|
||||
dragged: function(x, y) { },
|
||||
moved: function (x, y) { }
|
||||
});
|
||||
}
|
||||
|
||||
function setupAnimations(state) {
|
||||
state.addAnimation(0, "idle", true, 1);
|
||||
state.addAnimation(0, "walk", true, 2);
|
||||
state.addAnimation(0, "run", true, 4);
|
||||
state.addAnimation(0, "roll", false, 3);
|
||||
state.addAnimation(0, "run", true, 0);
|
||||
state.addAnimation(0, "run2", true, 1.5);
|
||||
state.addAnimation(0, "jump", false, 3);
|
||||
state.addAnimation(0, "run2", true, 0);
|
||||
state.addAnimation(0, "run", true, 1);
|
||||
state.addAnimation(0, "idle", true, 3);
|
||||
state.addAnimation(0, "idleTired", true, 0.5);
|
||||
state.addAnimation(0, "idle", true, 2);
|
||||
state.addAnimation(0, "walk2", true, 1);
|
||||
state.addAnimation(0, "block", true, 3);
|
||||
state.addAnimation(0, "punch1", false, 1.5);
|
||||
state.addAnimation(0, "block", true, 0);
|
||||
state.addAnimation(0, "punch1", false, 1.5);
|
||||
state.addAnimation(0, "punch2", false, 0);
|
||||
state.addAnimation(0, "block", true, 0);
|
||||
state.addAnimation(0, "hitBig", false, 1.5);
|
||||
state.addAnimation(0, "floorIdle", true, 0);
|
||||
state.addAnimation(0, "floorGetUp", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "meleeSwing1-fullBody", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "meleeSwing2-fullBody", false, 1.5);
|
||||
state.addAnimation(0, "idle", true, 0);
|
||||
state.addAnimation(0, "idleTired", true, 0.5);
|
||||
state.addAnimation(0, "crouchIdle", true, 1.5);
|
||||
state.addAnimation(0, "crouchWalk", true, 2);
|
||||
state.addAnimation(0, "crouchIdle", true, 2.5).listener = {
|
||||
start: function (trackIndex) {
|
||||
setupAnimations(state);
|
||||
}
|
||||
};
|
||||
|
||||
state.setAnimation(1, "empty", false, 0);
|
||||
state.setAnimation(1, "hideSword", false, 2);
|
||||
}
|
||||
|
||||
function setupUI() {
|
||||
var list = $("#skins-skin");
|
||||
for (var skin in skeleton.data.skins) {
|
||||
skin = skeleton.data.skins[skin];
|
||||
if (skin.name == "default") continue;
|
||||
var option = $("<option></option>");
|
||||
option.attr("value", skin.name).text(skin.name);
|
||||
if (skin.name === "Assassin") {
|
||||
option.attr("selected", "selected");
|
||||
skeleton.setSkinByName("Assassin");
|
||||
}
|
||||
list.append(option);
|
||||
}
|
||||
list.change(function() {
|
||||
activeSkin = $("#skins-skin option:selected").text();
|
||||
skeleton.setSkinByName(activeSkin);
|
||||
skeleton.setSlotsToSetupPose();
|
||||
randomizeSkins.checked = false;
|
||||
});
|
||||
|
||||
$("#skins-randomizeattachments").click(randomizeAttachments);
|
||||
$("#skins-swingsword").click(swingSword);
|
||||
randomizeSkins = document.getElementById("skins-randomizeskins");
|
||||
}
|
||||
|
||||
function setSkin (skin) {
|
||||
var slot = skeleton.findSlot("item_near");
|
||||
var weapon = slot.getAttachment();
|
||||
skeleton.setSkin(skin);
|
||||
skeleton.setSlotsToSetupPose();
|
||||
slot.setAttachment(weapon);
|
||||
}
|
||||
|
||||
function swingSword () {
|
||||
state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
|
||||
}
|
||||
|
||||
function randomizeSkin () {
|
||||
var result;
|
||||
var count = 0;
|
||||
for (var skin in skeleton.data.skins) {
|
||||
if (skeleton.data.skins[skin].name === "default") continue;
|
||||
if (Math.random() < 1/++count) {
|
||||
result = skeleton.data.skins[skin];
|
||||
}
|
||||
}
|
||||
setSkin(result);
|
||||
$("#skins-skin option").filter(function() {
|
||||
return ($(this).text() == result.name);
|
||||
}).prop("selected", true);
|
||||
}
|
||||
|
||||
function randomizeAttachments () {
|
||||
var skins = [];
|
||||
for (var skin in skeleton.data.skins) {
|
||||
skin = skeleton.data.skins[skin];
|
||||
if (skin.name === "default") continue;
|
||||
skins.push(skin);
|
||||
}
|
||||
|
||||
var newSkin = new spine.Skin("random-skin");
|
||||
for (var slot = 0; slot < skeleton.slots.length; slot++) {
|
||||
var skin = skins[(Math.random() * skins.length - 1) | 0];
|
||||
var attachments = skin.attachments[slot];
|
||||
for (var attachmentName in attachments) {
|
||||
newSkin.setAttachment(slot, attachmentName, attachments[attachmentName]);
|
||||
}
|
||||
}
|
||||
setSkin(newSkin);
|
||||
randomizeSkins.checked = false;
|
||||
}
|
||||
|
||||
function render () {
|
||||
timeKeeper.update();
|
||||
var delta = timeKeeper.delta;
|
||||
|
||||
if (randomizeSkins.checked) {
|
||||
var now = Date.now() / 1000;
|
||||
if (now - lastSkinChange > 2) {
|
||||
randomizeSkin();
|
||||
lastSkinChange = now;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
|
||||
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
var texture = assetManager.get(DEMO_NAME, "heroes.png");
|
||||
var width = bounds.x * 1.25;
|
||||
var scale = width / texture.getImage().width;
|
||||
var height = scale * texture.getImage().height;
|
||||
renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
skinsDemo.loadingComplete = loadingComplete;
|
||||
skinsDemo.render = render;
|
||||
skinsDemo.DEMO_NAME = DEMO_NAME;
|
||||
init();
|
||||
};
|
||||
Reference in New Issue
Block a user