要想做个HTML5游戏大手子？可得学好CreateJS这个神器！它就像个全能工匠一样，能帮你轻松做出炫酷的HTML5游戏。接下来，别急着跳过！先从哪儿下？要么直接在官网上试驾JS文件，要么试试他们的CDN链接。但无论如何，这可是做好HTML5游戏的开局至关重要
EaselJS:简化处理HTML5画布 TweenJS:用来帮助调整HTML5和Javascript属性 SoundJS:用来简化处理HTML5 audio PreLoadJS:帮助管理和协调加载中的一些资源
创建Stage对象
首先，咱们得搞个叫做Stage的东西，里面塞个Canvas画布，再弄个DisplayObject做它的孩子就行了。这个EaselJS库可是很给力的有储存图形形式的功能，还可以分层显示，甚至有让人眼前一亮的交互框架和各种好用的工具来帮你们玩转2D图形！
使用Bitmap创建图像
别等！先在HTML里加个canvas，再来用JS动动手，让你的图片酷炫起来！这不就是小意思么？
您的浏览器版本过低，请更换更高版本的浏览器
// 通过画布ID 创建一个 Stage 实例
var stage = new createjs.Stage("imageView");
// 创建一个 Bitmap 实例
var theBitmap = new createjs.Bitmap("imgs/testImg.jpg");
// 设置画布大小等于图片实际大小
stage.canvas.width = theBitmap.image.naturalWidth;
stage.canvas.height = theBitmap.image.naturalHeight;
// 把Bitmap 实例添加到 stage 的显示列表中
stage.addChild(theBitmap);
// 更新 stage 渲染画面
stage.update();
看看我们自创的小魔棒啦——专属的JS代码。加上tick能有爽朗的图形运动，让你的图片动感十足！下面是个代码实例， easeljs-shape-circle-move.js。
使用SpriteSheet和Sprite创建动态的位图
//Create a stage by getting a reference to the canvas
var stage = new createjs.Stage("circleView");
//Create a Shape DisplayObject.
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,40);
//Set position of Shape instance.
circle.x = circle.y = 50;
//Add Shape instance to stage display list.
stage.addChild(circle);
//Update stage will render next frame
stage.update();
别怕！我们能用Spritesheet跟Sprite做动态图画~首先得把EaselJS搞进来，然后弄出个Canvas。搞定图片后，直接在JS里加载这些素材就行了！然后你就能看到像走马灯那样的效果！在easeljs-sprite-01.html里面有详细教程哟~
想要按钮控制动画不断变化吗？你可以试试gotoAndPlay（action）这个牛逼的方法喔，就能轻松搞定了！只要动动手，调整下HTML文件和JS代码，立马就能看到生动有趣的动画效果哦～感兴趣的话，看看咱们的源码：easeljs-sprite-02.html。
使用Text创建简单的文本
stage.addEventListener("click",handleClick);function handleClick() {
// Click happened;
console.log("The mouse is clicked.");
}
stage.addEventListener("mousedown",handlePress);function handlePress() {
// A mouse press happened.
// Listen for mouse move while the mouse is down:
console.log("The mouse is pressed.");
stage.addEventListener("mousemove",handleMove);
}function handleMove() {
// Check out the DragAndDrop example in GitHub for more
console.log("The mouse is moved.");
}
The mouse is pressed. The mouse is clicked.
Text创建文本也不难~直接看代码就知道怎么弄！
使用Container创建保存其他显示对象的容器
// Update stage will render next frame
createjs.Ticker.addEventListener("tick",handleTick);
//添加一个Ticker类帮助避免多次调用update方法
function handleTick() {
var maxX = stage.canvas.width - 50;
var maxY = stage.canvas.height - 50;
//Will cause the circle to wrap back
if(circle.x < maxX && circle.y == 50){
// Circle will move 10 units to the right.
circle.x +=10;
}else if(circle.x == maxX && circle.y 50 && circle.y == maxY){
circle.x -=10;
}else if(circle.x<= 50){
circle.y -=10;
}
stage.update();
}
罐子里装的都是你想要留住的显示对象登录后就可以复制。可是这后面的看不到了，真想知道发生啥事！
评论0