【COCOS2D-HTML5 开发之一】新建HTML5项目及简单阐述与COCOS2D/X引擎关系
转载自【黑米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,一切正常,剩余的就交给大家了。
【COCOS2D-HTML5 开发之一】新建HTML5项目及简单阐述与COCOS2D/X引擎关系相关推荐
- html5开发制作,漂亮html5模板欣赏,H5网站建设
html5是什么? HTML5 是下一代的 HTML(超文本标记语言,网页的组成部分),HTML5是web开发世界的一次重大的改变,能适配pc.手机等各终端,跨平台性能极强,移动互联网是未来的趋势,h ...
- HTML5开发工具——进军HTML5
我们所说的HTML5开发工具,其实就是一个扩展(HTML5 Pack),它在 Dreamweaver 中添加对 HTML5 和CSS3 的支持.本文简要概述HTML5开发工具的安装,并且提供HTML5 ...
- 【手把手带你Godot游戏开发】新建Godot项目
宅家期间倾情巨献:真·手把手Godot游戏开发系列教程 Godot Engine 3.2 stable 点击桌面的Godot Engine图标 进入项目管理器界面,如果是初次运行,你的项目列表应该是空 ...
- 主流html5桌面应用开发,主流HTML5开发工具推荐
HTML5开发工具推荐 HTML5被看做是web开发者创建流行web应用的利器,增加了对视频和Canvas 2D的支持.HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来,如Adobe的Fla ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十九) —— HTML5 对 Web App 的影响
在本系列文章的开头,Kayo 曾经介绍过 Web App 的优缺点,并且说明了 HTML5 在其中起的作用,当然,Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后 ...
- HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册
HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册. 超过2G 的 HTML5 视频教程免费分享,免费下载! 尚硅谷前端HTML5视频_HTML & CSS 核心基 ...
- HTML5开发环境PhoneGap视频教程
HTML5开发视频教程PhoneGap实战(jQuery Mobile开发.API解析.3个经典项目实战) 一.HTML5开发视频教程课程简介: 1.1 移动应用现状 移动应用产品往往常常考虑多个平 ...
- 读书笔记:《HTML5开发手册》--figure、time、details、mark
周日继续读<HTML5开发手册>,并进行Demo练习,今天主要学习四个HTML5新增的元素:figure.time.details.mark. 不学不知道,原来这些平时不注意的元素都有着很 ...
- iOS 5 cocos2d游戏开发实战(第2版)
<iOS 5 cocos2d游戏开发实战(第2版)> 基本信息 作者: [美]Steffen Itterheim Andreas Low [作译者介绍] 译者: 同济大学苹果俱乐部 丛书名 ...
最新文章
- VC2005:无法执行添加/移除操作,因为代码元素是只读的....多个解决办法
- VS2013+OpenCV3.4.2编译
- Python 批量处理特定格式文件
- flume案例-文件数据采集-步骤分析
- 打印菱形(Java)
- c语言基础回顾 —— 其他知识点
- 鸿蒙测试机型微博,华为多款机型开启鸿蒙尝鲜:微博已适配HarmonyOS小尾巴
- 通过gdb调试分析Linux内核的启动过程
- 【读书笔记】《Javascript语言精粹》
- python 3.6.5 模拟银行转账系统
- 蚂蚁课堂视频笔记思维导图-3期 九、分布式缓存架构
- 微信公众平台H5支付
- 手写Promise 封装Promise resolve reject then catch Promise.resolve Promise.reject
- windows注册表_改进Windows的20个最佳注册表技巧
- Springboot @Lazy注解
- IT开发的岔路口:究竟是Java好还是嵌入式好?
- 58字体加密解决思路
- 缺陷跟踪管理工具-Mantis BugFree Bugzilla
- VBA 单一单元格的多行内容拆分为多行
- 研发流程——准入体系设计
热门文章
- 戴尔服务器t系列和r系列,满足VR需求 戴尔升级T/R系列塔式工作站
- html表格的系列代码,HTML系列(八):表格(示例代码)
- 云南大学软件学院计算机网络实验三,云南大学 软件学院 计网实验5
- 帝国cms数据库php调用tag,帝国CMS列表内容模板调用TAG的两种方法
- mysql 恢复空密码_mysql 找回密码
- 个人简历中计算机应用能力,年中计算机应用专业个人简历模板.docx
- idea 一键部署 cloudtoolkit
- vue element table switch开关组件
- CUDA C编程权威指南 第八章 多GPU编程
- 图像识别 RGB HSV