So, I decided that I wanted to practice and learn my JavaScript skills doing video games. I wasn't sure with what I should begin, as I have try this several times and fail.
So I found this library easeljs. It's really easy to use it.
This post and the future ones, are to share, part of the code and explain some of the things I had issues to manage, probably this can help somebody.
When I create new spreadsheet, I select the first frame, that I want the sprite to begin, so in this is the stop image
grant = new createjs.Sprite(spriteSheet, "stopRight");
So I found this library easeljs. It's really easy to use it.
This post and the future ones, are to share, part of the code and explain some of the things I had issues to manage, probably this can help somebody.
function init() {
stage = new createjs.Stage("demoCanvas");
circle = new createjs.Shape();
spriteSheet = new createjs.SpriteSheet({
framerate: 5,
"images": ["man2_rt1.gif","man2_rt2.gif","man2_Up_rt1.gif","man2_Up_rt2.gif","man2_Down_rt1.gif","man2_Down_rt2.gif"],
"frames": {"regX": 16, "height": 32, "count": 6, "regY": 0, "width": 32},
"animations": {
"runRight":{
frames: [1,0],
next: "runRight",
speed: 1
},
"runUp":{
frames: [3,2],
next: "runUp",
speed: 1
},
"runDown":{
frames: [5,4],
next: "runDown",
speed: 1
},
"stopRight": [0,"stopRight",0],
"stopUp": [2,"stopUp",2],
"stopDown": [4,"stopUp",4]
}
});
grant = new createjs.Sprite(spriteSheet, "stopRight");
grant.x = 50;
grant.y = 50;
circle.graphics.beginFill("black").drawCircle(x,y,10);
stage.addChild(grant);
stage.addChild(circle);
createjs.Ticker.addEventListener("tick", tickFn);
createjs.Ticker.on('tick',tick);
createjs.Ticker.setFPS(15);
stage.update();
};
When I create new spreadsheet, I select the first frame, that I want the sprite to begin, so in this is the stop image
grant = new createjs.Sprite(spriteSheet, "stopRight");
Comentarios
Publicar un comentario