制作动画或小游戏——CreateJS基础类(一)
前面曾经记录过Canvas的基础知识《让自己也能使用Canvas》,在实际使用中,用封装好的库效率会高点。
使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的一套模块化的库和工具,有4个模块,github地址在这里。
最近看到有个中文网,很多API都翻译了出来,不过就是翻译的比较生硬。
我参考了国外写的一本书《HTML5.Games.with.CreateJS》,再根据自己的一些理解整理了一下这个库的使用。
下面所有的demo代码都可以在这里查看到。
一、Stage
Stage(舞台)就是展现图形、执行动画的地方,必须先创建Stage,然后才能做后续操作。
有两种方式的初始化:
stage = new createjs.Stage(document.getElementById('canvas'));
stage = new createjs.Stage('canvas');//直接使用canvas的ID
接下来就是添加图形等布置操作,等到你布置好舞台后,就需要调用“update”方法,展示新的舞台内容。
stage.update();
二、Ticker
Ticker类是一个定时器,主要就是定时刷新舞台,理想的帧速率是60FPS,在这个类中也可以手动的修改这个速度。
var stage;
function init() {
stage = new createjs.Stage('canvas');//直接使用canvas的ID
createjs.Ticker.addEventListener("tick", runGame);
createjs.Ticker.setFPS(60);
}
function runGame(e) {
stage.update();
}
如果想控制“runGame”中的刷新,可以设置暂停。
“setPaused”方法可以修改“e”中的“paused”属性。
createjs.Ticker.setPaused(true);
function runGame(e) {
if(!e.paused)
stage.update();
}
三、Graphics
1)初始化方式
接下来可以画一些图出来,Graphics类可以画矢量图(vector)或位图(bitmap)。
var g = new createjs.Graphics();
g.beginStroke('#000');
g.beginFill('#FF6600');
g.drawRect(0,0,100,100);
也可以链式的写法。
var g = new createjs.Graphics().beginStroke('#000').beginFill('#FF6600').drawRect(0,0,100,100);
Graphics类仅仅提供了画图,但并不会显示,如果要显示,就需要“Shape”类的帮忙。
2)简写
Graphics类中的画图方法还有简写:
四、Shape
1)制作图形
一旦你创建了一个Graphics类,你就需要Shape类,下面的代码接上面的“g”。
var square = new createjs.Shape(g);
square.x = square.y = 100;
stage.addChild(square);
除了正方形,还可以有三角形、圆、多边形等,详细的代码可以在这里看到。
2)简单的动画
使用动画就会引入TweenJS模块,将会用到上面画正方形的Graphics代码,多了下面两句代码。
//绕着图形中心滚动
square.regX = square.regY = 50;//设置图形的X和Y轴位移
createjs.Tween.get(square).to({
rotation: 360
}, 3000);
五、一个UI元素demo
接下来制作一个常见的加载条,当年上传、打开某个程序或做其它操作经常能看到,详细代码可以在这里查看到。
1)制作过程
先设置舞台,再创建创建加载条,最后用定时器累加加载条长度,其实也可以直接在Ticker事件中累加长度,只是速度会快一点。
function init() {
setupStage();//设置舞台
buildLoaderBar();//创建加载条
startLoad();//用定时器累加加载条长度
}
用链式写法来写更新长度的那段代码,“updateLoaderBar”是在“startLoad”函数中的。
function updateLoaderBar() {
loaderBar.graphics.beginFill('#00ff00').drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40).endFill();
loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
}
先是画里面的蓝色,再画边框。
beginFill和endFill组合使用了一下,endFill是指重新开始画,使得后面的设置不会影响当前的。
如果我去掉endFill,将会直接显示完整的绿色,因为后面的“drawRect(0, 0, LOADER_WIDTH, 40)”,又设置了一遍宽度。
beginStroke和endStroke组合使用,目的和上面的差不多。
如果把“endStroke”去掉,就会发现多了根右边框,之所以会多是前面的“drawRect”影响了展示。
2)一点小改造
后面再观察一下发现,其实可以不用每次来画边框,边框可以在“buildLoaderBar”函数中定义。
function buildLoaderBar() {
loaderBar = new createjs.Shape();
loaderBar.x = loaderBar.y = 100;
loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
stage.addChild(loaderBar);
}
相应的“updateLoaderBar”函数也要做些修改,drawRect中的X、Y坐标要修改下,宽度也要改变下。
本来以为设置了边宽为2,那么也要偏移2,但其实不是,只需要偏移1就行了。
function updateLoaderBar() {
loaderBar.graphics.beginFill('#00ff00').drawRect(1, 1, LOADER_WIDTH * percentLoaded - 2, 38).endFill();
}
如果我把边框的宽度改成4,偏移和宽度又要重新计算了,怪不得写在里面,就方便多了。
制作动画或小游戏——CreateJS基础类(一)的更多相关文章
- 制作动画或小游戏——CreateJS事件(二)
在Canvas中如果要添加事件,就需要计算坐标来模拟各种事件,而EaselJS中已经封装好了多个事件,只需调用即可. 一.事件 1)点击 事件是绑定在Shape类中的,click事件与DOM中的意思是 ...
- [SpriteKit] 制作瓦片地图小游戏
概述 SpriteKit制作瓦片地图游戏,深入了解2D游戏制作过程 详细 代码下载:http://www.demodashi.com/demo/10703.html 说实话这个2D游戏实战的入门看的我 ...
- 制作一个 JavaScript 小游戏
简评: 作者学习了编程两个月,边学边做了一个 JavaScript 小游戏,在文中总结了自己在这个过程中的一些体会,希望能给其他初学者一些帮助. 对于很多想学编程但一直没下定决心的同学来说,最大的问题 ...
- 用C#制作推箱子小游戏
思路分析: 一.制作一个地图 二.地图中放置墙.箱子.人.目标等 三.让小人动起来完成推箱子动作 游戏制作: 1.按照上述地图制作一个地图 (12行×13列) 地图可以看做是行和列组成的,即可以看做 ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
- 用cocos2d 2.1制作一个过河小游戏(4): 游戏主逻辑BaseLayer设计
前段时间一直在忙.没有时间更新博客.今天还是抽点时间把最后一小部分游戏的实现放上来吧. BaseLayer.h: #import <GameKit/GameKit.h> #import & ...
- Python制作塔防小游戏
开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块.
- 利用python 5分钟制作一款小游戏
1.安装pygame 在命令行cmd中输入:pip install pygame ( 注:如果安装不成功,需要输入:python -m pip install --user --upgrade pip ...
- .NET手撸2048小游戏
.NET手撸2048小游戏 2048是一款益智小游戏,得益于其规则简单,又和2的倍数有关,因此广为人知,特别是广受程序员的喜爱. 本文将再次使用我自制的"准游戏引擎"FlysEng ...
随机推荐
- 谁说JavaScript容易?
你尝试过给一组数字排序吗? Javascript的sort()方法默认用来给数字排序 所以[1,2,5,10].sort()将会输出[1, 10, 2, 5]. 要正确的对数组进行排序的话,你可以使用 ...
- Unity_UGUI知识点思维导图
转自 http://blog.csdn.net/qq_34134078/article/details/51772568 个人总结的UGUI学习知识要点思维导图,四张部分图及最后一张整体图 1.UI基 ...
- Android_SQLite数据库增删改查操作
一:什么是SQLite? 在Android平台上,集成了一个嵌入式关系型轻量级的数据库. 二:什么时候用的数据库? 有大量相似机构的数据需要存储时. 三:如何创建一个数据库? 1.创建一个Sqlite ...
- Web方式预览Office/Word/Excel/pdf文件解决方案
最近在做项目时需要在Web端预览一些Office文件,经过在万能的互联网上一番搜索确定并解决了. 虽然其中碰到的一些问题已经通过搜索和自己研究解决了,但是觉得有必要将整个过程记录下来,以方便自己以后查 ...
- ExtJS扩展:扩展grid
ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所 ...
- Expert 诊断优化系列-------------针对重点语句调索引
上一篇我们说了索引的重要性,一个索引不仅能让一条语句起飞,也能大量减少系统对CPU.内存.磁盘的依赖.我想上一篇中的例子可以说明了.给出上一篇和目录文链接: SQL SERVER全面优化------- ...
- 一种让 IE6/7/8 支持 media query 响应式设计的方法
在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...
- C#刨根究底:《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
- 利用Hexo搭建个人博客-博客发布篇
通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...
- HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...