我在createJS中看到了大约10种不同的spritesheets实现。我尝试了很多不同的方法,但不能让我的spritesheet出现在舞台上。在使用谷歌Chrome工具进行调查时,我看到从对象层次结构中的spritesheet创建的精灵对象,但无论我做什么,我似乎无法让它出现在舞台上。
也许某人之前已经做过这件事并且看到我在哪里错了。相关代码如下。
function handleBatLoad()
{
var spriteSheet = new createjs.SpriteSheet({
"images": [batImage],
"frames": {"width": 170, "height": 142},
"animations": { "flap": [0,5] }
});
animation = new createjs.Sprite(spriteSheet, "flap");
animation.gotoAndPlay("flap");
animation.x = 100;
animation.y = 100;
spriteSheet.getAnimation("flap").frequency = 2;
spriteSheet.getAnimation("flap").next = "flap";
animation.gotoAndPlay("flap");
stage.addChild(animation);
Ticker.setFPS(60);
Ticker.addListener(stage);
stage.update();
}
如果查看完整代码会对您有所帮助:https://github.com/mlassoff/30MinuteGame
提前致谢。
答案 0 :(得分:3)
我测试了你的代码并在调试后发现了你的bug:spritesheet中的图像高度太高了。您将142px设置为高度,但您的PNG图像为117px。如果更改它,将显示图像。如果你给精灵高度大于图像,似乎createjs会崩溃。
顺便说一句,你在这里也有错误:
Ticker.setFPS(60);
Ticker.addListener(stage);
您需要更改
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(stage);
我看到你应该改变很多代码:
您应该使用preloadjs加载batSpritesheet.png图像(与其他资产一样)
handleMouseMove
中的代码会使您的应用程序崩溃:您每次移动鼠标时都会在舞台上添加一个孩子并刷新舞台,这很糟糕。您只需要在加载游戏时添加一次crossHair图像,然后将其更改为onmousemove,并使用Ticker显示游戏
反正我是你的代码的一些refacto,它与你的实际代码比较明白,为什么我这样做,并在你的游戏开发的乐趣,HTML5和createjs是真的很有趣玩:d
var context;
var queue;
var WIDTH = 1024;
var HEIGHT = 768;
var mouseXPosition;
var mouseYPosition;
var batImage;
var stage;
var animation;
var crossHair;
window.onload = function()
{
/*
* Set up the Canvas with Size and height
*
*/
var canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
context.canvas.width = WIDTH;
context.canvas.height = HEIGHT;
stage = new createjs.Stage("myCanvas");
/*
* Set up the Asset Queue and load sounds
*
*/
queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.Sound);
queue.on("complete", queueLoaded, this);
createjs.Sound.alternateExtensions = ["ogg"];
queue.loadManifest([
{id: 'backgroundImage', src: 'assets/background.png'},
{id: 'crossHair', src: 'assets/crosshair.png'},
{id: 'shot', src: 'assets/shot.mp3'},
{id: 'background', src: 'assets/countryside.mp3'},
{id: 'batSpritesheet', src: 'assets/batSpritesheet.png'},
]);
queue.load();
}
function queueLoaded(event)
{
// Add background image
var backgroundImage = new createjs.Bitmap(queue.getResult("backgroundImage"))
stage.addChild(backgroundImage);
// Play background sound
createjs.Sound.play("background", {loop: -1});
// Create bat spritesheet
var spriteSheet = new createjs.SpriteSheet({
"images": [queue.getResult('batSpritesheet')],
"frames": {"width": 198, "height": 117},
"animations": { "flap": [0,4] }
});
// Create bat sprite
animation = new createjs.Sprite(spriteSheet, "flap");
animation.x = 100;
animation.y = 100;
animation.gotoAndPlay("flap");
stage.addChild(animation);
// Create crosshair
crossHair = new createjs.Bitmap(queue.getResult("crossHair"));
stage.addChild(crossHair);
// Add ticker
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', stage);
// Set up events AFTER the game is loaded
window.onmousemove = handleMouseMove;
window.onmousedown = handleMouseDown;
}
function handleMouseMove(event)
{
crossHair.x = event.clientX-45;
crossHair.y = event.clientY-45;
}
function handleMouseDown(event)
{
createjs.Sound.play("shot");
}