Share to EffectHub.com

You can earn money or coins from your share:)

Tips: you can use Sparticle for uploading away3D effects.

Tips: you can download Sparticle for uploading effects.

Tips: The ActionScript editor is supporting Away3D, Starling, Dragonbones and Flex frameworks.

Tips: paste the web page URL then click button:)

EffectHub.com: Your Best Source for Gaming
Login    or

用Cocos2d-JS快速开发游戏《来自喵星的你》

(via:Cocos引擎中文站)

今天我们来介绍一下如何使用Cocos2d-JS引擎快速开发游戏《来自喵星的你》

游戏地址(建议用手机访问):http://app8.download.anzhuoshangdian.com/cat/

源码地址:https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/html5/how-to-make-a-cat-game/res/Catnorris-master.zip

1.Cocos2d-JS引擎

Cocos2d-JS引擎是Cocos2d-x的JS版本,它极大简化与整合的API设计使得游戏开发变得前所未有地轻松。依托Web平台使Cocos2d-JS享有高效的开发测试环境,命令行工具提供三步就可以搞定Web与Native全平台部署的便捷功能。

官方下载地址:http://cn.cocos2d-x.org/download/

官方指南:http://cn.cocos2d-x.org/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/html5/zh.md

2.Cocos Code IDE

Cocos Code IDE是基于 Eclipse的跨平台IDE,可帮助开发者便捷地创建游戏工程、编写调试代码、实时查看修改效果、并最终直接发布成可上架的安装包。

官方下载地址:http://cn.cocos2d-x.org/download/

官方JS指南:http://cn.cocos2d-x.org/tutorial/show?id=1173

3.游戏

《来自喵星的你》主角是一只喵星小喵咪。他的使命是在危险的地球上铲除汪星人(为什么这两个星球的主战场要设置在地球上,我也没想通,不要在意这些细节嘛...),配角就是一群不断产生的汪星人,玩家需要控制喵星人的移动和攻击来躲避或者打败汪星人,打败的越多分数越高,如果喵星人被打败了,游戏结束,这个时候就可以把你的成绩分享给你的好友,比一比谁更牛。

游戏无外乎就是各种游戏内的对象根据你所设定的逻辑或者用户的交互运行一系列动画而已。

我们先简单介绍一下这个游戏的结构:

A.不要主菜单不要一堆乱七八糟的东西,一进游戏就开始玩,越简洁越能抓住用户。

B.游戏的主界面,玩家操作界面和分数标签。

C.喵星人只有一只,汪星人随着时间一直产生。

D.游戏结束显示游戏结束的界面,可以重玩也可以分享。所以这是个单场景游戏。

1)window.onload函数是Cocos2d-JS游戏的入口。

在这里,我们加载了资源后进入到游戏场景。

  1. cc.LoaderScene.preload(["catnorrisd.png", "pg.png", "arrow.png","end.png"], function () {//加载资源

  2. cc.director.runScene(new MyScene());//加载资源后回调,进入场景

MyScene 就是游戏的主场景了,MyScene从 cc.Scene继承而来。进入游戏后,引擎会调用 onEnter 函数,所以我们可以在 onEnter函数里初始化整个游戏场景UI和处理触摸相关的逻辑。

2)创建分数标签

比如,创建一个分数标签,很简单,只需要初始化标签的属性,并添加到场景中即可。

  1. this.scoreLabel =  UI.scoreLabel = new cc.LabelTTF("0","黑体", 24, cc.size(150, 30), cc.TEXT_ALIGNMENT_LEFT);//创建Label

  2. this.addChild(this.scoreLabel);//添加到场景

  3. this.scoreLabel.attr({ //属性设置

  4.    x:30,

  5.    y:cc.director.getVisibleSize().height - 25,

  6.    strokeStyle: cc.color(0,0,0),

  7.    lineWidth: 2,

  8.    color: cc.color(255,150,100),

  9.    anchorX:0.1

  10. });

3)处理触摸逻辑

如何捕获用户的触摸?Cocos2d-JS提供了一个很方便的接口,我们只要在游戏的场景中调用

  1. cc.eventManager.addListener

重写下面三个函数就可以了。

  1. onTouchBegan:function(touch, event);

  2. onTouchMoved:function(touch, event);

  3. onTouchEnded:function(touch, event);


You must Sign up as a member of Effecthub to view the content.

1630 views    0 comments

You must Sign up as a member of Effecthub to join the conversation.

Join Effecthub.com


Or Login with Your Email Address:

Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character