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)相关推荐
- html5怎么兼容js 插件,Modernizr.js入门指南(HTML5CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...
- js入门·对象属性方法大总结
数组(Array):系列元素的有序集合: 详细演示请看:[js入门系列演示·数组 ] http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.ht ...
- Node.js 入门知识点总结
Noed.js 快速入门 前言 node.js 入门 环境配置 hello node.js node.js 获取参数 node.js 模块系统 node.js 路由 node.js 文件操作 使用 n ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- web前端-JS入门
web前端-JS入门 1.初识JavaScript 1.1 JavaScript的简单介绍 1.2 JS的三种写法 1.2.1 行内式 1.2.2 内嵌式 1.2.3 外部js 1.3 JS输入输出语 ...
- Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...
- Node.js 入门手册:那些最流行的 Web 开发框架
这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...
- 物理世界的互动之旅:Matter.js入门指南
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 本文简介 戴尬猴,我是德育处主任 欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
- 使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 详情请看主页:modernizr主页 1. modernizr 是什么? modernize 是一个js库----一个用于检测当 ...
- modernizr 支持html5,使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 1.modernizr 是什么? modernize 是一个js库----一个用于检测当前浏览器对html5&css3 ...
最新文章
- 【JavaWeb】servlet与http请求协议
- 终于看见光的速度了:每秒一万亿帧的相机,拍摄到光的运行状态!
- 2017-2018互联网类脑巨系统研究报告,互联网大脑、城市云脑和AI
- FIFO buffer 和普通buffer区别
- AT91SAM9XEK ramdisk 启动笔记
- python类加载_如何重新加载一个类在python shell?
- Django笔记7(通用视图)
- 如何在苹果Mac上右键点击?
- 卡巴世界,卡巴斯基,卡巴斯基key,卡巴斯基激活码,软件下载,每天更新
- macpro下docker安装目录_macos – 在mac os下的Docker deamon配置路径
- 【无线篇】(6.0) ❀ 10. FortiCloud 管理 AP (上) ❀ FortiAP 无线AP
- Python Requests实现天气预报
- 2022年计算机二级Python考哪些内容?
- 网上二手服务器能做家用电脑吗?
- 雅思阅读话题词汇-alluvial
- 制作二十四进制的时钟特效(JavaScript)
- coso全称是什么_京东方全称是什么
- Facebook广告投放的正确姿势:玩转目标定位
- 归并排序(递归+非递归)
- httpclient-Connection pool shut down 问题排查