Учебник 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>

Javascript:

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

Мои проблемы были связаны с тем, что у меня есть javascript в отдельном файле и проблемы с областью. Я исправил эту проблему, включив мой javascript для этой функции в начале моей веб-страницы. (Этот вопрос был упрощенной версией) Спасибо!

источник

2013-06-20 13:50:40

Вы есть синтаксические ошибки на Init и сброс:

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. Хотя это не полностью функционально, поскольку не все ресурсы находятся на сцене, но вы должны быть способны заставить его работать на вашем ПК.

источник

2013-06-20 13:32:47 isJustMe

Простите, что они были на самом деле опечатками с моей стороны. Извините, мой код не имел этих проблем в моей локальной копии. Мне удалось решить проблему, с которой я столкнулся сейчас. На самом деле это было связано с тем, что javascript находится в отдельном файле и имеет проблемы с областью видимости и т. Д. Спасибо за ваш ответ. –

без проблем, рад, что вы его работали. – isJustMe

Учебник EaselJs. Анимация не работает

ответ

Смежные вопросы