cocos2d-js 入门 (主要是HTML5)
cocos2d-js是cocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone8,Mac,Windows等平台。
利用cocos2d-js开发HTML5游戏/动画,我们可以通过SDK也可以直接使用js类库:
l SDK下载:http://cn.cocos2d-x.org/download/
l js类库:http://www.cocos2d-x.org/filecenter/jsbuilder/
先说说SDK的开发步骤:
1、 安装python
2、 解压SDK,运行setup.py
3、 运行cmd,新建cocos2d-js项目:cocos new –l js project_name
4、 使用webStorm等IDE打开项目目录,新建的项目已经有现成HelloWorld例子
5、 了解一下main.js的说明(关于project.json),然后打开resource.js和app.js阅读代码
6、 在app.js中正式开始自己的代码编写。当然,这里可以增加新的js文件,需要修改project.json。
再说说js类库的开发步骤:
1、 下载类库
2、 新建HTML页面,引入相应类库
3、 在onload之后,编写cocos2d-js代码,从cc.game.run()开始。入口代码其实跟SDK开发方式的main.js一样。这里更推荐使用SDK方式,因为可以通过阅读源代码获取API的使用说明。
开始cocos2d-js开发前,需要洗洗脑,知道cocos2d-js的平面坐标情况。这跟HTML和canvas的布局都不一样。
在cocos2d-js游戏中,画面的左下角是(0,0),x从左往右递增,而y是从下往上递增的,跟数学的二维坐标系一致。
Cocos2d-js框架把游戏拆分为很多个场景,当玩家在不同界面切换的时候,框架实际上就是让游戏画面在不同场景中切换。跟Flash一样,cocos2d-js也有最基本的元素——节点Node。节点可以包含子节点,形成树形结构:
然后,Layer、Sprite继承了节点,实现了更多功能,例如Layer用于表示一个面板一个层,Sprite精灵用于加载图片表示人物。而场景本身也是节点,所以场景中可以添加层,层中可以添加层,也可以添加精灵。
接着基于刚新建的HelloWorld,做一个简单的例子。
首先解释一下main.js几行代码。
cc.game.onStart = function(){ cc.view.adjustViewPort(true); //设置html5的viewport meta属性 cc.view.setDesignResolutionSize(800, 800, cc.ResolutionPolicy.SHOW_ALL); //设置画面尺寸和适配规则 cc.view.resizeWithBrowserSize(true); //设置是否跟随浏览器窗口变化 //load resources cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new GameScene()); }, this); }; cc.game.run(); //游戏启动
接着修改app.js:
var GameLayer = cc.Layer.extend({ ctor: function () { this._super(); var size = cc.winSize; //加载背景图 var bg = new cc.Sprite("res/bg.jpg"); this.addChild(bg, 1); bg.x = size.width/2; bg.y = size.height/2; //加载5个小人,不断做旋转和放缩 for (var i = 0; i < 5; i++) { var man = new cc.Sprite("res/grossini.png"); man.runAction(cc.spawn(cc.rotateBy(1, 360, 360), cc.sequence(cc.scaleTo(1, 2), cc.scaleTo(1, 1))).repeatForever()); this.addChild(man, 2); man.x = size.width*Math.random(); man.y = size.height*Math.random(); } //加载5个小人,不断做14帧的动画播放 for (var j = 0; j < 5; j++) { var man = new cc.Sprite(); var animation = new cc.Animation(); for (var i = 1; i <= 14; i++) { animation.addSpriteFrameWithFile("res/grossini_dance_" + (i < 10 ? ("0" + i) : i) + ".png"); } animation.setDelayPerUnit(1 / 7); //控制动画播放频率 man.runAction(cc.animate(animation).repeatForever()); man.x = size.width*Math.random(); man.y = size.height*Math.random(); this.addChild(man, 3); } return true; } }); var GameScene = cc.Scene.extend({ onEnter:function () { this._super(); var layer = new GameLayer(); this.addChild(layer); } });
利用Webstorm的服务器功能,右击index.html使用chrome运行:
可以看到一堆小人:
通过这个简单例子,我们对cocos2d-js制作HTML5有了初步印象。后续就可以继续学习官方SDK中附带的samples了,里边的js-tests项目中包含了几乎全部cocos2d-js功能的实例程序,例如:定时器、精灵动作、帧动画、骨骼动画、粒子系统、界面编辑器等等。
后边,笔者把原来starling的小游戏Hungry hero改造一下,使用cocos2d-js重新实现。这是一个跑酷游戏,玩家需要控制超人不断吃食物,同时避开障碍物。
演示地址:
http://kenkozheng.github.io/cocos/hungry_hero/index.html
代码地址:
https://github.com/kenkozheng/cocos2d-js/tree/master/hungry_hero
游戏中使用到:
1、 基本:鼠标事件、帧动画、声音(cc.audioEngine)
2、 平行背景(自行实现)
3、 对象池(cc.pool)
4、 粒子系统(cc.ParticleSystem)
5、 位图字体(cc.LabelBMFont)
6、 批量渲染层(cc.SpriteBatchNode)
具体的每个知识点就不在这里详细介绍了,具体可以搜索官方SDK samples中的例子。
cocos2d-js 入门 (主要是HTML5)的更多相关文章
- Node.js 入门手册:那些最流行的 Web 开发框架
这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- cocos2d js jsb XMLHttpRequest 中文乱码
1.首先讲下怎样使用XMLHttpRequest 下面所说的是在cocos2d-x 2.2.2 或者 2.3 版本号中. 首先要明确cocos2d js事实上分两个版本号,一个是html5的版本号,另 ...
- 极简 Node.js 入门 - Node.js 是什么、性能有优势?
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 1.4 NPM & package.json
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 3.3 文件写入
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
随机推荐
- Cocos2d-x V2.x版本对64bit的支持
2015年2月1日后新提交的应用必须要支持64位架构. 我所使用的是cocos2d-x V2.0版本,而且源码有部分代码是修改过的.好在cocos2d-x官方已经放出了一个支持64位的2.2.6版本, ...
- Activity间用Intent、Bundle、onActivityResult进行传值
其实Activity间的传值就是通过Bundle,intent中也是自动生成了Bundle来传值,里面还有个onActivityResult()方法也可以传送数值. 如果一个Activity是由sta ...
- 《OSPF和IS-IS详解》
<OSPF和IS-IS详解> 基本信息 作者: (美)Jeff Doyle 译者: 孙余强 出版社:人民邮电出版社 ISBN:9787115347886 上架时间:2014-4-25 出版 ...
- python模块uuid产生唯一id
使用版本4:uuid4就可以了 UUID4缺点:糟糕的随机数发生器使得它更有可能发生碰撞,但是概率真的很小 UUID1缺点:暴露隐私 If all you want is a unique ID, y ...
- [转]分析MySQL数据类型的长度【mysql数据字段 中length和decimals的作用!熟悉mysql必看】
转载自:http://blog.csdn.net/daydreamingboy/article/details/6310907 分析MySQL数据类型的长度 MySQL有几种数据类型可以限制类型的&q ...
- 奇怪吸引子---ChenCelikovsky
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...
- 5.2 dubbo-compiler源码解析
ExtensionLoader<Protocol> loader = ExtensionLoader.getExtensionLoader(Protocol.class); final P ...
- 基于ZigBee和STM32的智能家居控制系统的设计与实现(三)
基于ZigBee和STM32的智能家居控制系统的设计与实现(三) 自从前两篇博客介绍了智能家居系统的基本实现机理后,收到了好多朋友的来信,和我讨论了好多的这方面的知识,在此很高兴,虽然自己做的这个所谓 ...
- 如何同步两台Linux机器的时间?
除了用NTP服务器之外,下面的命令可以做到让几台机器的时间都跟一台机器同步. date --set="$(ssh root@10.245.110.101 date)" 参考资料 = ...
- iOS开发-UILabel和UIButton添加下划线
关于UILabel和UIButton有的时候需要添加下划线,一般有两种方式通过默认的NSMutableAttributedString设置,第二种就是在drawRect中画一条下划线,本文就简单的选择 ...