EaselJs 자습서. 애니메이션이 실행되고 있지 않음

안녕하세요, 저는이 easeljs 튜토리얼의 첫 번째 부분에 있습니다. EaselJs 자습서. 애니메이션이 실행되고 있지 않음

http://david.blob.core.windows.net/easeljstutorials/easelJSSpritesTutorial01.html

이

내가 생산해야 내가 조금 내 목적에 맞게 코드를 변경 한

(롤 거기에서 튜토리얼 발전을 걱정하지 마세요)하지만 지금은 작동하지 않는 것입니다 .

시작을 클릭하면 애니메이션이 재생되지 않습니다.

내 코드에 뭔가 빠졌습니까? 여기

는 JSfiddle입니다 :

http://jsfiddle.net/d2tmY/

일부 HTML :

<body> 
<div class="description"></div> 
<div class="canvasHolder"> 
    <canvas id="game" width="240" height="64" style="background-color:#607559">Your browser doesn't support canvas. 
    </canvas> 
</div> 
<button id="Start" onclick="init();">Start</button> 
<button id="Reset" onclick="reset();">Reset</button>

자바 스크립트 :

var canvas, stage, screen_width, screen_height, bmpAnimation; 

var imgPlayerRun = new Image(); 

init() { 
    //find canvas and load images. Wait for last image to load 
    alert("Init is being run"); 
    canvas = document.getElementById("game"); 
    canvas.style.background = "white"; 


    imgPlayerRun.onload = handleImageLoad; 
    imgPlayerRun.onerror = handleImageError; 
    imgPlayerRun.src = "http://s8.postimg.org/r8i7knr91/test_player_run.png"; 
} 

function() { 
    stage.removeAllChildren(); 
    createjs.Ticker.removeAllListeners(); 
    stage.update(); 
} 

function handleImageLoad(e) { 
    startGame(); 
} 

function startGame() { 
    alert("startGame is being run"); 
    stage = new createjs.Stage("canvas"); 

    //grab canvas width and height for later calculations 
    screen_width = canvas.width; 
    screen_height = canvas.height; 

    //create spritesheet and assign associated data 
    var spriteSheet = new createjs.SpriteSheet({ 
     //image to use 
     images: [imgPlayerRun], 
     //width height and registration point of each sprite 
     frames: { 
      width: 47, 
      height: 47, 
      regX: 32, 
      regY: 32 
     }, 
     animations: { 
      walk: [0, 9, "walk"] 
     } 
    }); 

    //create bitmap animation instance to display the playback the animation sequence 
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet); 

    //start playing the first sequence 
    bmpAnimation.gotoAndPlay("walk"); //animate!!! 

    //set up a shadow - note shadows are ridiculously resource intensive - use if necessary only 
    bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4); 

    bmpAnimation.name = player1; 
    bmpAnimation.direction = 90; 
    bmpAnimation.vX = 4; 
    bmpAnimation.x = 16; 
    bmpAnimation.y = 32; 

    //have each player start at a specific frame 
    bmpAnimation.currentFrame = 0; 
    stage.addChild(bmpAnimation); 

    //we want to do some work before we update the canvas 
    //otherwise we could use Ticker.addListener(stage) 
    createjs.Ticker.addListener(window); 
    createjs.Ticker.useRAF = true; 
    //best frame rate targeted 60 fps 
    createjs.Ticker.setFPS(60); 
} 

//called if there is an error loading the image (usually due to a 404) 
function handleImageError(e) { 
    console.log("Error Loading Image: " + e.target.src); 
} 

function tick() { 
    //hit testing the screen width, otherwise our sprite would disappear 
    if (bmpAnimation.x >= screen_width - 12) { //- 12 as this is a quarter of our sprite width and so should look like actually hits the sprite edge and not a box 
     //we've reached the right side of our screen 
     //we need to walk left now and go back to our initial position 
     bmpAnimation.direction = -90; 
    } 

    if (bmpAnimation.x < 12) { 
     //we've reached the left side of our screen 
     //we need to need to walk right now 
     bmpAnimation.direction = 90; 
    } 

    //moving the sprite based on the direction and the speed 
    if (bmpAnimation.direction == 90) { 
     bmpAnimation.x += bmpAnimation.vX; 
    } else { 
     bmpAnimation.x -= bmpAnimation.vX; 
    } 

    //update the stage 
    stage.update(); 
}

출처

2013-06-20 Kyohei Kaneko

내 문제는 실제로 자바 스크립트가 별도의 파일에 있고 범위에 문제가 있기 때문에 발생했습니다. 내 웹 페이지 자체의 머리에이 기능에 대한 자바 스크립트가있는 문제를 해결했습니다. (위의 질문은 단순화 된 버전이었습니다) 감사합니다!

출처

2013-06-20 13:50:40

당신 초기화에 구문 오류가 있고, 리셋 :

function init() { 
     //find canvas and load images. Wait for last image to load 
     alert("Init is being run"); 
     canvas = document.getElementById("game"); 
     canvas.style.background = "white"; 
     imgPlayerRun.onload = handleImageLoad; 
     imgPlayerRun.onerror = handleImageError; 
     imgPlayerRun.src = "http://s8.postimg.org/r8i7knr91/test_player_run.png"; 
    } 



    function reset() { 
     stage.removeAllChildren(); 
     createjs.Ticker.removeAllListeners(); 
     stage.update(); 
    }

첫 번째는 함수 선언 누락되었고, 후자는 함수 이름이 업데이트 된 fiddle을 확인하지 않았다. 모든 리소스가 바이올린에있는 것은 아니기 때문에 이것이 완벽하게 기능 할 수는 없지만 PC에서 사용할 수 있어야합니다.

출처

2013-06-20 13:32:47 isJustMe

미안 그들은 실제로 내 부분에 오타가되었습니다. 미안 해요 내 코드는 내 로컬 복사본에 그 문제가 없었어요. 나는 지금 당면했던 문제를 해결할 수 있었다. 실제로 javascript가 별도의 파일에 존재하고 스코프 등으로 문제가 발생했습니다. 귀하의 답변에 감사드립니다. –

문제 없으므로 기쁘게 생각합니다. – isJustMe

EaselJs 자습서. 애니메이션이 실행되고 있지 않음

답변

관련 문제