【COCOS2D-HTML5 开发之一】新建HTML5项目及简单阐述与COCOS2D/X引擎关系

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocos2d-html5/1463.html

            真的是有一段时间没写博了,这段时间呢,发生的事情真的挺多,另外自己呢也闲来做了一些自己的喜欢的东西,主要做的还是基于Mac系统的Cocoa框架的各种编辑器吧。(对了,今年初也出了自己第二本书《iOS游戏编程之从零开始—Cocos2d-x与cocos2d引擎游戏开发》

            废话少扯,最近又研究了下Cocos2d-HTML5相关引擎,其实说起HTML5,3、4年前Himi就接触过了,那时候的HTML5 Canvas  对我印象很深,但是不论当时还是现在对于HTML5绝大部分公司仍旧处于观望状态,我也不例外,无疑观望期间也不断的有引擎基于HTML5,例当前的Cocos2d-HTML5,还有以后基于Untiy3D的HTML5,这早晚的事情。总体来说,HTML5是个趋势,只是个时间的问题。

那么本篇呢,简单的叙述下Cocos2d-HTML5新创建一个项目过程以及与cocos2d/x之间的关系。

        第一步:首先下载Cocos2d-html5的引擎,下载地址:http://cocos2d-x.googlecode.com/files/Cocos2d-html5-v2.1.5.zip

当前Himi下载的是最新的2.1.5 version.

 

       第二步:解压引擎包,然后目录如下:

 

          第三步:简单以 HelloHTML5World 项目为例,我们可以直接使用浏览器打开HelloHTML5World文件夹中的 index.html,即可运行此示例项目。

运行到浏览器中的效果如下:

 

运行效果如上,其实这是个错误效果图,先不要着急。(原因只是资源准备失败的原因,后续说明)

我们先不管这个问题,先看下整个的项目结构:(Himi使用的 TextMate 打开的)

 

简单叙述:

1. res  资源存放目录

2. src  js脚本存放目录(我们自己的项目源码目录)

3. build.xml : 对cocos2d引擎进行编译成js脚本形式所用文件

4. cocos2d.js: 对cocos2d引擎进行参数设置的配置文件

5. index.html: 对当前视图的配置文件

6. main.js : 主程序入口

 

                                                                   那么很多读者疑惑如何下手?  

其实很简单,大家可以理解,cocos2d-html5 引擎只是将cocos2d 引擎框架直接映射成应html5 api实现的过程,我们通过js语言书写cocos2d引擎代码的形式,完成cocos2d引擎形式代码掌管整个HTML5项目。大家直接按照写cocos2d/x的代码形式进行书写即可,但是语言要求js格式。

 

                                                              那么如何创建一个新的HTML5项目:

       第一步:将cocos2d-html5 引擎目录下的HelloHTML5World 文件夹直接copy一份出来,然后文件名可自定义。

       第二步:将引擎目录下的lib文件夹下的 Cocos2d-html5-v2.1.5.min.js 文件copy 到你第一步的项目文件夹下即可。

Cocos2d-html5-v2.1.5.min.js 文件的作用:将cocos2d引擎以HTML5 api形式映射的js库,供我们项目使用,如果你不copy这个项目到你的项目中,你无法运行。

大家疑惑为什么引擎下的 HelloHTML5World 项目下为什么不需要 ? 其实这个示例项目采用的是相对引擎目录路径下的每个引擎类映射js来使用。如下图:

 

而这个Cocos2d-html5-v2.1.5.min.js 文件为什么有个min? 这个其实就是以前的Cocos2d-html5-v2.1.5.jsb.js ,简单理解就是将js代码进行一个压缩,将代码中的table 空格等都去除,节省其文件大小的一种形式。

       

       第三步:直接使用浏览器运行项目下的index.html 即可。

 

当然这时候运行的效果如 HelloHTML5World 项目运行效果相同,此原因主要是由于资源加载收到浏览器限制,因此导致项目无法正常启动。

这个问题其实是浏览器防止被钓鱼、对AJAX的一种防护,而cocos2d-html5 引擎请求图片的方式则采用的就是AJAX.

                    因此我们解决此问题可以有两种方式:

1.  本地安装web服务器, apache 等,将项目发布在web服务器上即可。

2.  直接使用火狐浏览器进行调试,火狐浏览器是没有限制的。

                  如下是火狐浏览器运行的结果:

 

ok,一切正常,剩余的就交给大家了。

 

时间: 2016-05-16

【COCOS2D-HTML5 开发之一】新建HTML5项目及简单阐述与COCOS2D/X引擎关系的相关文章

html5开发制作,漂亮html5模板欣赏,H5网站建设

html5是什么? HTML5 是下一代的 HTML(超文本标记语言,网页的组成部分),HTML5是web开发世界的一次重大的改变,能适配pc.手机等各终端,跨平台性能极强,移动互联网是未来的趋势,html5将会扮演越来越重要的角色. html5能干什么? HTML5 是一个新的web标准的集合,它包括全新定义的HTML标签和更为规范化的HTML标签,CSS3以及全新的javascript API接口.这些接口既能操作前端所见所得,也能操作后台输送到前台的数据,可以实现类似于智能手机APP端的应

《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——2.4节小结

2.4 小结iOS应用开发指南--使用HTML5.CSS3和JavaScript本章你学会的知识有以下这些. 一个新的设计项目或者流程的每个步骤都有重要意义,包括获取和设置你的工具!因此,需要仔细考虑.获得一个唯一的苹果公司开发者ID,以便你保持iTunes购买ID与以开发人员的身份使用iTunes和iTunes Connect完全隔离开.仔细阅读苹果公司开发协议,并确保你对它的规定已经足够熟悉了.像任何协议一样,它创造了机会,同时也定义约束.下载和安装iOS SDK,给你提供了基本的应用程序-

《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——1.4节法宝就是转变

1.4 法宝就是转变iOS应用开发指南--使用HTML5.CSS3和JavaScript所以这里有iOS设备另一个关键的不同点:我们的原生应用程序的内容传递形式,这是我们需要设计的重点. 如果你不确信的话,对比一下其他硬件的屏幕表面区域的尺寸. iPhone.iPod touch和iPad有一个方面非常相似:它们几乎只剩下屏幕.从正面观察,3种设备大约95%的区域是屏幕,而笔记本电脑的屏幕占的比例比50%还少一点点(图1.3).这是重要的区别.即使笔记本电脑的屏幕上显示了一个迷人的网页,很显然它

node.js 和HTML5开发本地桌面应用程序_node.js

HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能.HTML5可以将任何普通网站转变成Web应用.HTML5 web 应用不仅具有在桌面浏览器应用中的优势,同时在智能手机和平板中也是开发利器. 在手机端,有一个非常棒的工具叫做PhoneGap,使用这个快速开发平台,任何人都可以使用HTML5+CSS3+JavaScript开发出安卓,iOS等应用.PhoneGap的最好的一个特点是,你并不需要联网,不需要连接web服务器,你可以从把它当成本地桌面应用.

iPhone5和iOS6上HTML5开发的新增功能

开发移动应用到底是选择Native.Web应用或者混合应用?答案是不同的移动应用需要不同的技术,选择合适的就行.其实大多数移动应用,不管是企业移动应用还是互联网移动应用,90%都可以使用基于HTML5的Web技术就足够.在Android 4.0和iOS 6以上浏览器已经是最快的应用了,比任何本地的微博.微信都快,无须更新升级,无须上传分裂的APP市场,无须突然被苹果下架应用.再看看最近发布 Firefox OS 开发手机的配置也大概知道,运行大多数应用不需要那么高配置. 目前主流的智能终端中,i

非常有用的 HTML5 开发教程和速查手册

如今,随着主流浏览器对HTML5的不断支持和完善,越来越多的开发者开始使用 HTML5 来开发各种功能强大的Web应用程序,HTML5 正引领互联网新革命.为了方便大家更好的学习 HTML5 ,今天这篇文章向大家分享15个非常有用的 HTML5 开发教程和速查手册. HTML5教程 How to Make an HTML5 iPhone App Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 Design &

优秀的 HTML5 开发教程

虽然,HTML5 技术还不够成熟,仍处于不断改进和发展中,但其众多先进和强大的地方已是有目共睹.为了方便大家更好的学习 HTML5 ,本文向大家分享25个优秀的HTML5开发教程.   Create a Grid Based Web Design in HTML5 & CSS3 Making a Beautiful HTML5 Portfolio Build a Neat HTML5 Powered Contact Form Create a Stylish Contact Form with

格式-html5开发meta标签求详解

问题描述 html5开发meta标签求详解 html5里meta标签到底该怎么理解?开发pc网站与开发移动网站,我发现meta里的内容大不一样,但是我学到的教程里貌似没有移动平台里那么多的陌生东西啊,比如< meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-sca

手机app开发-有人用html5开发过手机app吗?

问题描述 有人用html5开发过手机app吗? 除了需要html5 jquery js 还需要什么技术?或者需要什么框架? 解决方案 用Hbuilder就行,这个很好用,支持多平台 解决方案二: jQueryMobile也可以做 解决方案三: h5做不了app,需要结合phonegap,自己找下phonegap怎么用,可以将html打包为app 解决方案四: Sencha ExtJS & Touch也可以