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

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

百牛信息技术bainiu.ltd整理发布于博客园

废话少扯,最近又研究了下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,一切正常,剩余的就交给大家了。

时间: 2024-10-24 19:25:22

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

如何在jenkins上新建一个项目及其简单配置

1.首先,点击[新建]进入选择页面,如下图(一般选择"构建一个自由风格的软件项目")     2.填好项目名称后,点击ok,跳转至如下页面,可以在这个页面进行项目的配置(包括拉源码.修改持续构建时间.打包部署前修改配置文件等) 3.General中的"丢弃旧的构建"可以设定持续构建的 4.在"参数化构建过程"中可以设置要构建的版本有哪些,如下 5.在源码管理模块可以设置源码地址(我们公司一般用的Git) 6.如果是自动化构建,可以在构建触发器中的

使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏览器时,浏览器会将一个列表中指定的资源都下载并储存在本地.下次当用户再访问这个网络程序时,浏览器会自动引用本地缓存中相应的文件,而不会再从网络下载这些资源.不管离线网络应用程序是否专为 Web Apps 而设,但这对于 Web Apps 来说无疑是个非常实用的特性,它使到 Web Apps 相对于原生 App

利用HTML5开发Android(7)---HTML5本地存储之Database Storage

在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌入式设备上,熟悉IOS/Android开发的同学,应该对SQLite数据库比较熟悉. HTML5中的数据库操作比较简单,主要有如下两个函数: 1.通过openDatabase

利用HTML5开发Android(4)---HTML5本地存储之Web Storage

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管

利用HTML5开发Android(5)---HTML5地理位置服务在Android中的应用

Android中 Java代码 1 //启用地理定位 2 webSettings.setGeolocationEnabled(true); 3 //设置定位的数据库路径 4 webSettings.setGeolocationDatabasePath(dir); 5 6 //配置权限(同样在WebChromeClient中实现) 7 public void onGeolocationPermissionsShowPrompt(String origin, 8 GeolocationPermiss

HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册

HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册. 超过2G 的 HTML5 视频教程免费分享,免费下载! 尚硅谷前端HTML5视频_HTML & CSS 核心基础教程(103集实战教学,从入门到精通) 本套视频适合零基础并且对前端知识感兴趣的同学.内容涵盖HTML基础.标签.CSS 选择器.盒子模型.浮动.定位.图片整合.PS 切图等页面相关常用技术. 视频最后包含一个实战项目:将一个 PSD 设计图转换为一个商业网站的首页.让同学们体验前端页面开发的全过程. 通

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web App “使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新. 该系列的文章实质上分成四个部分,分别是总体概况.jQuery Mobile 组件.jQuer

[Android_HTML5]基于PhoneGap(Cordova)框架的HTML5开发

PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台.官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表.但是有一条跨平台,却是很明显的优势.因为它采用HTML5+JavaScript的模式来开发应用.PhoneGap用JavaScript统一封装了几大平台的本地api(Andriod,IOS,WP8/7,WINRT)等等..这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去,打包一下就可以了.Phone

HTML5移动开发之路(49)——HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器——HBuilder.

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(49)--HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.NET.cn/ 一.新建文件 可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App项目 注释:Html5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距.HTML5+规范是一个开放的规范,在W3C中国的指