왜 내 캔버스에 내 스프라이트가 표시되지 않습니까?

나는 지금 자바 스크립트를 배우고 있으며 재미 있고 재미있는 게임을 만들기 위해 노력 중이다. 문제는 내가 게임을 만들기 위해 이젤 즈와 CreateJS를 사용하고 있으며 나는 단지 시작하고있다.왜 내 캔버스에 내 스프라이트가 표시되지 않습니까?

Anywho .. 나는 왜 내 캔버스 요소가 내가 사용하고있는 스프라이트를 보여주지 않을지에 대한 도움이 필요하다.

(function (window){ 

function Player(spriteSheet, startX, startY){ 
    this.setup(spriteSheet, startX, startY); 
} 

//spriteSheet is the path to the player sprite 
Player.prototype.setup = function (spriteSheet, startPosX, startPosY){ 
    //load the sprite sheet 
    var localSpriteSheet = new createjs.SpriteSheet({ 
     "animations": { 
      "run": [0, 6, "run"], 
      "jump": [7, 9, "jump"], 
      "idle": [31, 31, "idle"]}, 
     "images": [spriteSheet], 
     "frames": 
     { 
      "height": 64, 
      "width": 64, 
      "regX": 0, 
      "regY": 0, 
      "count": 64 
     } 
    }); 

    //use X and Y to position 
    this.x = startPosX; 
    this.y = startPosY; 
    this.sprite = new createjs.Sprite(localSpriteSheet, "idle"); 

    //1 = right | -1 = left | 0 = idle 
    this.direction = 0; 
    this.name = "Hero"; 
}; 

Player.prototype.tick = function(){ 
    this.move(); 

    //now animate the sprite 
    if(this.direction === 1){ 
     this.sprite.gotoAndPlay("run"); 
    }else if(this.direction === -1){ 
     this.sprite.gotoAndPlay("run"); 
    }else{ 
     this.sprite.gotoAndPlay("idle"); 
    } 
}; 

Player.prototype.move = function(){ 
    if(this.direction === 1){ 
     this.x += 1; 
    }else if(this.direction === -1){ 
     this.x -= 1; 
    }else{ 
     this.x += 0; 
    } 
}; 

window.Player = Player; 

} (window));

내 질문이 무엇인지 도대체입니다 : Player.js

(function (window){ 

var START_X_POS = 250; 
var START_Y_POS = 20; 

var LEFT_KEYCODE = 37; 
var RIGHT_KEYCODE = 39; 

var SPRITE_SHEET_PATH = "./assets/linkSprite.png" 

//at some point add in canvas dimensions for collision stuff 
function Game(stage){ 
    this.gameStage = stage; 
    this.Hero = new Player(SPRITE_SHEET_PATH, START_X_POS, START_Y_POS); 

    //store the current context 
    var instance = this; 

    document.onkeydown = function (e){ 
     instance.handleKeyDown(e); 
    }; 
    document.onkeyup = function (e){ 
     instance.handleKeyUp(e); 
    }; 

    this.gameStage.addChild(this.Hero); 
    this.gameStage.update(); 
} 

Game.prototype.Update = function(){ 
    this.Hero.tick(); 
}; 

Game.prototype.tick = function(){ 
    this.Update(); 
    this.gameStage.update(); 
}; 

// Starting the game 
Game.prototype.StartGame = function() { 
    createjs.Ticker.addListener(this); 
    // Targeting 60 FPS 
    createjs.Ticker.setFPS(60); 
}; 

Game.prototype.handleKeyDown = function (e){ 
    //the caps constants kinda explain this 
    if(e.keyCode === LEFT_KEYCODE){ 
     this.Hero.direction = -1; 
     console.log("handleKeyDown left"); 
    }else if(e.keyCode === RIGHT_KEYCODE){ 
     this.Hero.direction = 1; 
     console.log("handleKeyDown right"); 
    } 
} 

Game.prototype.handleKeyUp = function (e){ 
    //setting it back to idle animation 
    this.Hero.direction = 0; 
} 

window.Game = Game; 
} (window));

을하고 여기에 있습니다 :

여기

<head> 

<!-- Note: All core EaselJS classes are listed here: --> 
<script type="text/javascript" src="../EaselJS/src/createjs/events/Event.js"></script> 
<script type="text/javascript" src="../EaselJS/src/createjs/events/EventDispatcher.js"></script> 
<script type="text/javascript" src="../EaselJS/src/createjs/utils/IndexOf.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/UID.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/Ticker.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Matrix2D.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Point.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Rectangle.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Shadow.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/SpriteSheet.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Graphics.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/DisplayObject.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Container.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Stage.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Bitmap.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Sprite.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/BitmapAnimation.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/BitmapText.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Shape.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Text.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/display/DOMElement.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/events/MouseEvent.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/filters/Filter.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/ui/ButtonHelper.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/ui/Touch.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/SpriteSheetUtils.js"></script> 
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/SpriteSheetBuilder.js"></script> 

<!-- We also provide hosted minified versions of all CreateJS libraries. 
    http://code.createjs.com --> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

<!-- using this because for some reason the Player and Game files don't work without it --> 
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> 

<script src="javascript/Player.js"></script> 
<script src="javascript/Game.js"></script> 

<script type="text/javascript"> 
    var game; 

    var canvas = document.getElementById("gameScreen"); 
    var stage = new createjs.Stage(canvas); 

    function startGame(){ 
     game = new Game(stage); 
     game.StartGame(); 
    } 
</script> 

</head> 
<body onload="startGame();"> 
    <div id="test"><p>blah blah blah</p></div> 
    <div id="canvasHolder"> 
     <canvas id="gameScreen" width="500" height="500"></canvas> 
    </div> 
</body> 
</html>

가 Game.js입니다 : 여기

은 HTML 파일입니다 내가 잘못했기 때문에 스프라이트가 내 캔버스에로드되지 않는 이유는 무엇입니까?

출처

2014-05-22 Ben

확인은, 그래서 디버깅을 통해 나는 = 새 createjs.Stage (캔버스)'VAR 단계를 호출 할 때 캔버스 어떤 이유로 null 인 것으로 나타났습니다. 내 스프라이트가 그려지지 않는 이유가 될 수 있습니까? – Ben

은 index.html을'startGame()'함수 안에 모든 스크립트를 갖도록 변경했습니다. 이제 _Uncaught TypeError 오류가 발생합니다 : undefined는 _easeljs-0.5.0.min.js의 function_이 아닙니다 : 66_ – Ben

Game.js 파일에 문제가있어서'createjs.Ticker.addListener (this); '가 있고'createjs.Tick.addEventListener (this);'가 있어야합니다. 잘 작동하고 그 변경 사항에 오류가없고 가장 최근 버전으로 easeljs 버전을 업데이트하지만 스프라이트가 여전히 캔버스에 그려지지 않습니다 – Ben

시도해보십시오. `;

<script type="text/javascript"> 
    function startGame() 
    { 
     var game; 

     var canvas = document.getElementById("gameScreen"); 
     var stage = new createjs.Stage(canvas);   

     game = new Game(stage); 
     game.StartGame();    
    } 
    </script>

출처

2014-05-22 10:17:28 cracker

나는'game.StartGame()'을 호출 한 후에'game' 내부의 tick 함수가 범위를 잃어 버렸고,'this.Hero.tick()'을' Game.prototype.Update' – Ben

코드에서 정의한 "gameStage"는 어디입니까? 진드기가 업데이트 될 것입니다. – cracker

index.html의'stage'는' game = new Game (stage)'이고'this.gameStage = stage'를 통해 게임 객체에 자체 속성을 부여합니다 – Ben

왜 내 캔버스에 내 스프라이트가 표시되지 않습니까?

답변

관련 문제