gskinner.com의 EaselJS 라이브러리 (http://easeljs.com/, http://easeljs.com/examples/game/game.html)로 조금만 놀았으므로 HTML5의 캔버스를 훨씬 쉽게 처리 할 수 있습니다.EaselJS : OOP와 같은 클래스에서 BitmapSequence 문제가 발생했습니다.
그래서 캔버스에 스페이스 인베이더 (Space Invaders) 같은 것을 리메이크하려고합니다. 지금까지는별로 중요하지 않았습니다. 왼쪽에서 오른쪽으로 이동하는 지불 자입니다. 여기 진행 참조 : 그러나 나는 gskinner.com의 방법을 따르 http://www.youtube.com/watch?v=HaJ615V6qLk
을 이제 모든 좋은 멋쟁이 : 침략자를 들어 http://jansensan.net/experiments/easeljs-space-invader/
을, 나는 애니메이션을 필요한, 그래서 내가 이렇게하는 방법에 대한 자습서를 따라 "클래스"만들기 : http://easeljs.com/examples/game/Ship.js 클래스를 호출 할 수 있는지 확실하지 않지만 사용됩니다.
다음은 Invader에 대해 작성한 클래스입니다. 그러나 BitmapSequence가 EaselJS의 스테이지에 추가되지 않은 것처럼 보입니다. 누구든지 이걸 통해 나를 인도 할 수 있니? 감사!
// REFERENCES
/*
http://easeljs.com/examples/game/Ship.js
*/
// CLASS
(function(window)
{
function Invader()
{
this.initialize();
}
var p = Invader.prototype = new Container();
// CONSTANTS
// VARS
p.image;
p.bitmapSequence;
// CONSTRUCTOR
p.Container_initialize = p.initialize; //unique to avoid overiding base class
p.initialize = function()
{
this.Container_initialize();
this.image = new Image();
this.image.onload = p.imageLoadHandler;
this.image.onerror = p.imageErrorHandler;
this.image.src = "assets/images/invader-spritesheet.png";
}
p.imageLoadHandler = function()
{
var frameData = {
anim:[0, 1, "anim"]
}
var spriteSheet = new SpriteSheet(p.image, 22, 16, frameData);
p.bitmapSequence = new BitmapSequence(spriteSheet);
p.bitmapSequence.regX = p.bitmapSequence.spriteSheet.frameWidth * 0.5;
p.bitmapSequence.regY = p.bitmapSequence.spriteSheet.frameHeight * 0.5;
p.bitmapSequence.gotoAndStop("anim");
p.addChild(p.bitmapSequence);
}
p.imageErrorHandler = function()
{
console.log("Error: the url assets/images/invader-spritesheet.png could not be loaded.");
}
window.Invader = Invader;
}(window));