热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Cocos2d-HTML5初学者指南:第一部分基础知识

本文旨在为初学者提供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.2CocoStudio 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严重不搭,纯属测试用途,勿喷:




推荐阅读
  • 活动主题:五一巨献,问答有礼,105QB送给IT互联网界的劳动人民活动时间:4月30日晚上10点~5月2日晚上10点网址:http:ask.jiutianniao.com ... [详细]
  • 导读:今天编程笔记来给各位分享关于PHP的前端用什么工具的相关内容,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: ... [详细]
  • 基于域名、端口和IP的虚拟主机构建方案
    本文探讨了在单台物理服务器上构建多个Web站点的虚拟主机方案,详细介绍了三种主要的虚拟主机类型:基于域名、基于IP地址和基于端口的虚拟主机。每种类型的实现方式及其优缺点均进行了深入分析,为实际应用提供了全面的技术指导。 ... [详细]
  • 媒介这里大部份是本身碰到过的状况,另有一部份自创了偕行的文章,假如人人有碰到别的坑,迎接提出来一同研讨。学问要点1.Meta标签1.制止用户缩放页面,页面强迫让文档的宽度与装备的宽 ... [详细]
  • Ionic微信开发之环境配置
    在开发微信版的H5页面时,如果需要正常调用微信公众号的开放接口(测试或者发布情况),根据官方要求需要保证网页域名和后端维护的一致。因此,进行真服测试就显得很有必要。WebStorm ... [详细]
  • 本文全面解析了 gRPC 的基础知识与高级应用,从 helloworld.proto 文件入手,详细阐述了如何定义服务接口。例如,`Greeter` 服务中的 `SayHello` 方法,该方法在客户端和服务器端的消息交互中起到了关键作用。通过实例代码,读者可以深入了解 gRPC 的工作原理及其在实际项目中的应用。 ... [详细]
  • FastDFS Nginx 扩展模块的源代码解析与技术剖析
    FastDFS Nginx 扩展模块的源代码解析与技术剖析 ... [详细]
  • 如何在Mac上构建高效的本地服务器环境
    在Mac上构建高效的本地服务器环境,首先需要了解基本步骤:1. 配置目录基础;2. 启动Apache服务;3. 添加自定义文档至本地服务器;4. 查看自定义效果。此外,还可以通过手机或其他电脑访问本机服务器,以确保跨设备的兼容性和调试效果。Mac系统自带的Apache服务为本地开发提供了便捷的工具,本文将详细介绍每个步骤的具体操作方法。 ... [详细]
  • 2016-2017学年《网络安全实战》第三次作业
    2016-2017学年《网络安全实战》第三次作业总结了教材中关于网络信息收集技术的内容。本章主要探讨了网络踩点、网络扫描和网络查点三个关键步骤。其中,网络踩点旨在通过公开渠道收集目标信息,为后续的安全测试奠定基础,而不涉及实际的入侵行为。 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 在过去,我曾使用过自建MySQL服务器中的MyISAM和InnoDB存储引擎(也曾尝试过Memory引擎)。今年初,我开始转向阿里云的关系型数据库服务,并深入研究了其高效的压缩存储引擎TokuDB。TokuDB在数据压缩和处理大规模数据集方面表现出色,显著提升了存储效率和查询性能。通过实际应用,我发现TokuDB不仅能够有效减少存储成本,还能显著提高数据处理速度,特别适用于高并发和大数据量的场景。 ... [详细]
  • 在CentOS 7上部署WebRTC网关Janus
    在CentOS 7上部署WebRTC网关Janus ... [详细]
  • 如何设置域名默认301重定向至www前缀
    在进行域名默认301重定向至www前缀的操作前,确保你已经拥有一个有效的域名,并且该域名已正确解析到外部主机地址,能够正常访问网站。本文主要针对IIS 7及以上版本的用户,IIS 7之前的版本不适用。我们将详细介绍如何通过IIS管理器配置301重定向,确保所有请求都能自动跳转到带有www前缀的URL,从而提升网站的SEO效果和用户体验。 ... [详细]
  • HTML5 sever-sent onmessage方法不执行,怎么回事,求大神指点!做服务器广播,页面接收!
    我想实现HTML5sever-sent实现服务器发送消息,然后页面来获取消息,网上找了好多方法,最终找到了一个能用的,但是消息获取页面不执行onmessage方法,求大神指点!本人用.net写的,代 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
author-avatar
fghnh102_441
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有