2014-12-25 5 views
2

Я проверил этот форум/интернет/google вперед и назад для моего конкретного вопроса, но безрезультатно. Я приведу примеры, которые приближаются к моим, - которые я пытаюсь передать на свой собственный пример, но ничего не делаю. Пожалуйста помоги! Опять прошу прощения, если на это был дан ответ, и я просто упустил из виду, если это так, пожалуйста, бросьте мне ссылку - иначе вот мой код:CreateJS - Не могу получить мой spritesheet для анимации

Все, что я пытаюсь сделать, - это анимировать одно изображение спрайта прыгающего Mega Man.
Спасибо и счастливые праздники!

Примечание: Here the sprite I'm using

ВОТ МОЯ: JsFiddle

var stage, canvas, 
bmpA, data, 
megaman, spriteSheet; 

function Main() { 
    canvas = document.getElementById('canvas'); 
    stage = new createjs.Stage(canvas); 

    container = new createjs.Container(); 

    megaman = new Image(); 
    megaman.src = "megaman__jump.png"; 
    var bmpA = new createjs.Bitmap(megaman); 

    data = new createjs.SpriteSheet({ 
     images: [bmpA], 
     frames: { 
      width: 79, 
      height: 139, 
      count: 7 
     }, 
     animations: { 
      jump: [0, 6, "jump"] 
     } 
    }); 

    spriteSheet = new createjs.BitmapAnimation(data); 
    spriteSheet.gotoAndPlay("jump"); 


    createjs.Ticker.setFPS(30); 
    createjs.Ticker.addEventListener("tick", update); 
} 

function update(event) { 
    stage.addChild(spriteSheet); 
    stage.update(); 
} 


</script> 

</head> 

<body onload = "Main();"> 
    <canvas id = "canvas" width = "780" height = "300" 
     style = "border: 1px solid #000;"></canvas> 
</body> 
</html> 


    [1]: http://i.imgur.com/Q1OQM.png 
+0

Пожалуйста, сделайте скрипку, чтобы помочь лучше – OnlyMAJ

+0

Конечно! Вот моя скрипка. http://jsfiddle.net/MrDoubleJump/f58mr0Lk/ – MrDoubleJump

+0

Я рекомендую только добавить спрайт на сцену один раз, когда он будет создан. Добавление его снова приведет к изменению массива children, хотя ничего не меняется. – Lanny

ответ

0

Вот быстрое редактирование. http://jsfiddle.net/lannymcnie/f58mr0Lk/9/

  1. Ваш Fiddle не был очень полезным, так как он был только ваш код вставили. Я изменил его уронить тело тега (jsfiddle делает это для вас), импорт easeljs, и использовать полный путь к изображению.
  2. Класс BitmapAnimation был переименован в Sprite некоторое время назад. Я не уверен, какую версию EaselJS вы используете, но у этого может и не быть этого класса.
  3. Я удалил растровое изображение. Данные SpriteSheet принимают либо строковый путь, либо ссылку на изображение, а не битмап.
  4. Как я и предложил ниже, я вытащил весь метод обновления, добавил Sprite один раз, а затем галочку просто обновил сцену напрямую.

Скрипка «работает» сейчас, но размеры спрайтов не кажутся правильными. Взгляни.

data = new createjs.SpriteSheet({ 
    images: ["http://i943.photobucket.com/albums/ad274/Rah5er0/megaman__jump.png~original"], 
    frames: { 
     width: 79, 
     height: 139, 
     count: 7 
    }, 
    animations: { 
     jump: [0, 6, "jump"] 
    } 
}); 

var sprite = new createjs.Sprite(data); 
+0

Извините за Fiddle, я все еще новичок. Я наблюдал за некоторыми устаревшими учебниками, которые объясняли бы «анимацию битмапа» среди других устаревших несоответствий/увольнений. Изображение - я просто снял веб-сайт для тестирования, я делаю новый с одинаковыми размерами - в любом случае ... Спасибо, я очень ценю, что вы смотрите - одна кривая обучения решена! – MrDoubleJump

+0

Еще одна вещь, на которую я запутался: поскольку Fiddle заботится о тегах - я немного потерял, как обрабатывать «onload» в моем исходном коде. Когда я помещаю отредактированный код в свой компилятор, я получаю пустой холст. Еще раз спасибо. – MrDoubleJump

+0

Весь блок JavaScript завернут в закрытие функции, которое запускается при загрузке окна. Это настраивается на панели «Рамки и расширения» с левой стороны. – Lanny