作者:fghnh102_441 | 来源:互联网 | 2024-11-03 13:10
本文旨在为初学者提供Cocos2d-HTML5的基础知识入门指南。虽然作者在交大期间学习了基础的Web技术和AS3游戏开发,但感觉这些知识与实际应用仍有差距。几年前曾接触过Android开发,但由于缺乏C++和Objective-C的背景,未能深入。本篇将详细介绍Cocos2d-HTML5的核心概念和技术要点,帮助读者快速上手并掌握游戏开发的基本技能。
交大毕业后感觉还是盲目的,毕竟在那学的是基础WEB和AS3基础游戏制作,但感觉和AS无法日久生情...
话说在几年前学Android开发使用曾经接触了,但基于当时没接触C++/ObjC就没深究了。CH5这款引擎当时也还没有出现,所以接触的也不多,同时还使用了另一款libGDX引擎,但还是无爱。
目前来说HTML5还是比较冷门的,但就是很喜欢它,不久前想找个跨平台引擎来尝试开发游戏,看到了Cocos也有了HTML5版本,易实现跨平台、能直接在Windows环境上开发,使用JS来编写,还正是高兴,立马看上了,准备自学!
好了,不多说,接下来说正题,使用的是近期发布的CH5 V2.2.2和CocoStudio 1.2.0.0版本,IDE为官方推荐的WebStorm7开发工具。
1、环境安装html5当然还是基于浏览器来运行。
首先,安装本地服务器,如 AppServ,WAMP,XAMPP(我安装了这个)。Cocos2d引擎下载:http://www.cocos2d-x.org/downloadIDE WebStorm编辑器(官方推荐):http://www.jetbrains.com/webstorm/浏览器: Chrome Dev 34.0.1788.0 dev-m开发者版本(必须安装JetBrain IDE Support插件),便于快捷从IDE直接运行项目。(浏览器按照需求来安装即可,这里安装的是Dev开发者版本)
接着,把游戏引擎解压到服务器根目录,然后运行index.html看到如下界面说明成功。
(端口号63342是因运行于WebStorm关系)
2、网上搜到的教程,初始觉得这里的蛮不错的。因使用的引擎版本较高,按照教程操作会发现运行后黑屏,跟帖发现引擎多大部分源码已经更新或弃用导致,最后还是能成功的。
其次,多参考官方提供的例子(Test Cases)源码琢磨,都能正常上手。本地实例URL: ./samples/tests/index.html
个人是新手,加入了一些群组和论坛搜索遇到的问题、或者进行询问,通常都有大神们给予解答,之后另外发个自己常常上的一些网站供参考。WIKI:http://www.cocos2d-x.org/wiki/Cocos2d-html5API:http://www.cocos2d-x.org/reference/html5-js/V2.2.2/index.htmlDocs:http://www.cocos2d-x.org/docs/catalog/en一步一步教程:http://bbs.html5china.com/thread-4509-1-1.html (注意引擎版本)打怪升级之路:http://www.cocoachina.com/bbs/read.php?tid=152420
3、引擎文件关系
以HelloHTML5World文件夹为例,新手需要注意:- res 存放素材文件,如(游戏图片、音效)- src 存放源码文件
- resource.js 管理res内的素材文件,需要使用的素材都需要在这里声明
- index.html为项目入口程序
- cocos2d.js通常不修改,但保持appFiles:[]与自己的src内的xxx.js一致以避免错误
- main.js 视为设置程序入口场景
- var myApp = new cocos2dApp(HelloWorldScene);
(按照需要自行修改Scene类名进行各种调试)
a、定义图层:
var MenuLayer = cc.Layer.extend({...});
b、创建场景:
var MenuScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new MenuLayer();
layer.init();
this.addChild(layer);
cc.log("-MenuSpriteSCENE-")
}
});
c、屏幕尺寸
自定义屏幕尺寸,需要在2个文件内做出修改:
index.html
自行调整所需的宽度和高度
main.js
cc.EGLView.getInstance().adjustViewPort(false);
cc.EGLView.getInstance().resizeWithBrowserSize(true);
cc.EGLView.getInstance().setDesignResolutionSize(320, 480, cc.RESOLUTION_POLICY.SHOW_ALL);
resizeWithBrower为true为根据当前浏览器窗口显示完整大小
更多可参考官方新关于屏幕大小文档:
http://www.cocos2d-x.org/wiki/Understand_the_Resolution_Policy_in_Cocos2d-Html5_222?project_id=cocos2d-x
d、坐标
引擎的原点为左下角,Sprite默认的锚点在图片的中心点cc.p(0.5,0.5),锚点的范围一般是:0~1,根据需要来设置。
cc.p(0.5,0.5)图片的中心点
cc.p(0,0)图片的左下角
cc.p(0,1)图片的左上角
cc.p(1,0)图片的右下角
cc.p(1,1)图片的右上角
e、获取浏览器当前可见大小
var winSize = cc.Director.getInstance().getWinSize();
背景居中显示:
this.sprite = cc.Sprite.create(res.s_menuBG);
this.sprite.setPosition(winSize.width / 2, winSize.height / 2);
f、音效测试
cc.AudioEngine.getInstance().setMusicVolume(0.1);
cc.AudioEngine.getInstance().playMusic(res.s_mainBGM, true);
g、鼠标右键
引擎默认右键无法使用,为了便于进入Console而开启:
在自定义的JS内初始化时候添加:
cc.setContextMenuEnable(true);
预览:logo严重不搭,纯属测试用途,勿喷: