2
대각선 운동 중에 게임 스프라이트 애니메이션이 재생되지 않는 경우 대각선 애니메이션의 첫 번째 프레임에서 멈추는 문제가 있습니다. 누군가가 무엇이 일어 났는지 안다면 나는 매우 감사 할 것입니다.EaselJS (대각선 방향에서 스프라이트 애니메이션이 재생되지 않음)
function init() {
'use strict';
var menuSelected = false;
var shape = new createjs.Shape();
var g = shape.graphics;
shape.graphics.beginFill("#ffffff").drawRect(100, 300, 450, 100, 25);
var $container, canvas, stage, canvasW, canvasH,
manifest, totalLoaded, queue,
map1, mapTiles, game, mapWidth, mapHeight, tileSheet, tiles, board,
player, playerSheet, firstKey,
keysPressed = {
38: 0,
40: 0,
37: 0,
39: 0
};
$container = document.getElementById("container");
canvasW = 640;
canvasH = 416;
map1 = [
[2, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[2, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[2, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1],
[2, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
[2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1],
[2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
[2, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1],
[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1],
[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1],
[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1],
];
mapTiles = {};
function buildMap(map) {
var row, col, tileClone, tileIndex, defineTile;
if (!board) {
board = new createjs.Container();
board.x = 0;
board.y = 0;
stage.addChild(board);
}
mapWidth = map[0].length;
mapHeight = map.length;
defineTile = {
walkable: function (row, col) {
if (map[row][col] === 0) {
return false;
} else {
return true;
}
}
};
tileIndex = 0;
for (row = 0; row < mapHeight; row++) {
for (col = 0; col < mapWidth; col++) {
tileClone = tiles.clone();
tileClone.name = "t_" + row + "_" + col;
tileClone.gotoAndStop(map[row][col]);
tileClone.x = col * tileSheet._frameWidth;
tileClone.y = row * tileSheet._frameHeight;
mapTiles["t_" + row + "_" + col] = {
index: tileIndex,
walkable: defineTile.walkable(row, col)
};
tileIndex++;
board.addChild(tileClone);
}
}
}
function addPlayer(x, y) {
player.x = x * tileSheet._frameWidth + (tileSheet._frameWidth/2);
player.y = y * tileSheet._frameHeight + (tileSheet._frameHeight/2);
player.speed = 6;
player.height = 96;
player.width = 96;
player.gotoAndStop("standDown");
board.addChild(player);
}
function moveChar(char, dirx, diry) {
if (dirx === 0) {
char.y += diry * char.speed;
}
if (diry === 0) {
char.x += dirx * char.speed;
}
}
document.addEventListener("keydown", function (e) {
keysPressed[e.keyCode] = 1;
if (!firstKey) { firstKey = e.keyCode; }
});
document.addEventListener("keyup", function (e) {
if (keysPressed[88] === 1) {
menuSelected = !(menuSelected);
}
keysPressed[e.keyCode] = 0;
if (firstKey === e.keyCode) { firstKey = null; }
if (player.currentAnimation == "walkDown") { player.gotoAndStop("standDown");}
if (player.currentAnimation == "walkRight") { player.gotoAndStop("standRight");}
if (player.currentAnimation == "walkUp") { player.gotoAndStop("standUp");}
if (player.currentAnimation == "walkLeft") { player.gotoAndStop("standLeft");}
if (player.currentAnimation == "walkDiagUpRight") { player.gotoAndStop("standDiagUpRight");}
if (player.currentAnimation == "walkDiagUpLeft") { player.gotoAndStop("standDiagUpLeft");}
if (player.currentAnimation == "walkDiagDownRight") { player.gotoAndStop("standDiagDownRight");}
if (player.currentAnimation == "walkDiagDownLeft") { player.gotoAndStop("standDiagDownLeft");}
});
function detectKeys() {
if (keysPressed[38] === 1) {
if (player.currentAnimation !== "walkUp") { player.gotoAndPlay("walkUp"); }
moveChar(player, 0, -1);
}
if (keysPressed[40] === 1) {
if (player.currentAnimation !== "walkDown") { player.gotoAndPlay("walkDown"); }
moveChar(player, 0, 1);
}
if (keysPressed[37] === 1) {
if (player.currentAnimation !== "walkLeft") { player.gotoAndPlay("walkLeft"); }
moveChar(player, -1, 0);
}
if (keysPressed[39] === 1) {
if (player.currentAnimation !== "walkRight") { player.gotoAndPlay("walkRight"); }
moveChar(player, 1, 0);
}
// diagonal movement
if (keysPressed[38] === 1 && keysPressed[37] === 1) {
player.gotoAndPlay("walkDiagUpLeft");
}
if (keysPressed[38] === 1 && keysPressed[39] === 1) {
player.gotoAndPlay("walkDiagUpRight");
}
if (keysPressed[40] === 1 && keysPressed[37] === 1) {
player.gotoAndPlay("walkDiagDownLeft");
}
if (keysPressed[40] === 1 && keysPressed[39] === 1) {
player.gotoAndPlay("walkDiagDownRight");
}
}
function handleTick() {
detectKeys();
if (menuSelected === true) {
stage.addChild(shape);
}
if (menuSelected === false) {
stage.removeChild(shape);
}
stage.update();
}
function gameInit() {
manifest = [
{src: "img/tileset.png", id: "tiles"},
{src: "img/swordsman-spritesheet.png", id: "player"}
];
totalLoaded = 0;
function handleLoadComplete(event) {
totalLoaded++;
if (totalLoaded < manifest.length) {
console.log(totalLoaded + "/" + manifest.length + " loaded");
}
}
function handleFileLoad(event) {
var img, audio;
if (event.item.type === "image") {
img = new Image();
img.src = event.item.src;
img.onload = handleLoadComplete;
} else if (event.item.type === "sound") {
audio = new Audio();
audio.src = event.item.src;
audio.onload = handleLoadComplete;
}
}
function handleComplete(event) {
buildMap(map1);
addPlayer(3, 4, 0);
}
queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.SoundJS);
queue.addEventListener("fileload", handleFileLoad);
queue.addEventListener("complete", handleComplete);
queue.loadManifest(manifest);
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
stage.enableMouseOver(30);
createjs.Touch.enable(stage);
createjs.Ticker.setFPS(30);
createjs.Ticker.useRAF = true;
createjs.Ticker.addEventListener("tick", handleTick);
tileSheet = new createjs.SpriteSheet({
images: ["img/tileset.png"],
frames: {
height: 32,
width: 32,
regX: 0,
regY: 0,
count: 3
}
});
tiles = new createjs.Sprite(tileSheet);
playerSheet = new createjs.SpriteSheet({
animations: {
standRight:[0],
standDown:[32],
standLeft:[57],
standUp:[8],
standDiagUpRight:[16],
standDiagUpLeft:[24],
standDiagDownLeft:[48],
standDiagDownRight:[40],
walkDiagUpRight:[16,23,"walkDiagUpRight"],
walkDiagUpLeft:[24,31,"walkDiagUpLeft"],
walkDiagDownRight:[39,46,"walkDiagDownRight"],
walkDiagDownLeft:[47,55,"walkDiagDownLeft"],
walkRight:[0,7,"walkRight"],
walkLeft:[57,63,"walkLeft"],
walkUp:[8,15,"walkUp"],
walkDown:[32,39,"walkDown"]},
images: ["img/swordsman-spritesheet.png"],
frames: {width:96, height:96, regX:48, regY:48 }
});
player = new createjs.Sprite(playerSheet);
}
gameInit();
}