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中的例子。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

AndroidTShare Weekly No.10

本周热点开源项目 SpinMenu 转动轮盘样式的Fragment切换效果,非常漂亮。 效果图如下: ? 作者:Hitomi 项目开源地址:https://gi...

18010
来自专栏DeveWork

WordPress 开发之使用WordPress 3.8+后台图标(dashicons)

伴随着WordPress 3.8 的新界面,WordPress 官方为后台UI 引进了目前贼流行的webfont(又称 icon font),官方独立项目名为d...

1748
来自专栏前端人人

React第三方组件1(路由管理之Router的使用④按需加载-上)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

3474
来自专栏张善友的专栏

Html5 学习利器 Web Standards Update for Microsoft Visual Studio 2010 SP1

HTML5然还在草案阶段,不过 HTML5 这名词实在越来越热,互联网上很多产品都深度应用了HTML5,比如WebQQ,可以看看http://www.infoq...

2298
来自专栏.Net移动开发

Smobiler 4.4 更新预告 Part 1(Smobiler能让你在Visual Studio上开发APP)

在4.4版本中,大家对产品优化的一些建议和意见进行了相应的优化和修复,同时,还新增了一些令人激动的功能和插件。

823
来自专栏夏时

两款 Js 插件为你的网站添彩

在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。

4289
来自专栏腾讯社交用户体验设计

极速适配 iPhone X 秘笈

1714
来自专栏陈仁松博客

【译】在 ASP.NET Core 中使用 SignalR

近日,微软发布了.NET Core 2.0,但是开发人员中间仍然存在一些疑惑,就是.NET Core、.NET Standard、Xamarin和.NET Fr...

3804
来自专栏跟着阿笨一起玩NET

HTML中显示的文字自动换行

http://www.cnblogs.com/zjxbetter/articles/1323449.html

1811
来自专栏夏时

两款 Js 插件为你的网站添彩

841

扫码关注云+社区