使用createJS庫正確實施spritesheet？

Question

我已經在createJS中看到了10個不同的spritesheets實現。我已經嘗試了很多不同的方式，但無法讓我的Spritesheet出現在舞臺上。在使用谷歌瀏覽器工具進行調查時，我可以看到從spritesheet創建的sprite對象在對象層次上，但我似乎無法讓它出現在舞臺上，無論我做什麼。

也許有人已經這樣做過，並看到我的錯誤。相關的代碼如下。

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

感謝。

Answer 1

我測試了你的代碼，經過一些調試後發現你的bug是什麼：你的圖片高度在spritesheet太高。您將142像素設置爲高度，但您的PNG圖像爲117像素。如果您更改它，圖像將顯示。看起來，如果你給一個精靈高度大於圖像，那麼createjs會崩潰。

順便說一句，你也有錯誤的位置：

Ticker.setFPS(60); 
Ticker.addListener(stage); 

您需要更改此爲

createjs.Ticker.setFPS(60); 
createjs.Ticker.addEventListener(stage); 

我看到了很多的代碼，你應該改變：

• 你應該使用preloadjs加載您的batSpritesheet.png圖像（與您爲其他資產一樣）

• 您在handleMouseMove中的代碼會使您的應用程序崩潰：每當您的鼠標移動時，您都會將一個孩子添加到舞臺並刷新您的舞臺，這很糟糕。你只需要添加十字圖像時，你的遊戲加載一次，然後改變它的位置的OnMouseMove，並與北京時間

反正我是你的代碼的一些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"); 
}