您的位置:首页 > 其它

HLML5游戏开发的框架如何搭建

2013-12-19 16:51 363 查看
  HTML5游戏开发需要一个开发框架和编译环境,参阅了相关资料后选择开源的PhoneGap。PhoneGap是一个开源的开发框架,使用HTML5,CSS3和JavaScript来构建跨平台的的移动应用程序。
  下面介绍PhoneGap环境的搭建,及第一个Web APP。
  1、选择你使用的平台,PhoneGap支持6个平台的开发和编译:IOS,Android,WebOS(HP),BlackBerry,Symbian。
  我比较熟悉Android的开发流程,所以选择Android作为搭建环境。
  2、Eclipse 3.4+ 安装
  Eclipse 3.4+下载地址:http://www.eclipse.org/downloads/
  根据个人PC环境选择相应的版本,我的电脑是win7 x64,下载:Eclipse IDE for Java EE Developers x64
  3、下载并安装Android SDK。最新版本:android-sdk_r20-windows。下载地址:http://developer.android.com/sdk/index.html
  4、下载并安装ADT Plugin,最新版本是:ADT-20.0.0.zip。下载地址:http://developer.android.com/tools/sdk/eclipse-adt.html#installing
  PS:Eclipse 搭建Android开发环境,大家Google一下应该很多。
  5、下载最新版本的PhoneGap并解压,我们将使用其中的Android目录。下载地址:https://github.com/phonegap/phonegap/zipball/1.0.0
  6、编写第一个HTML5 App
  启动Eclipse,然后在菜单“File”下选择“New >Android Project”。
  在项目根目录下,创建两个新目录:
  /libs
  /assets/www
  复制phonegap.js(从PhoneGap解压缩后的Android目录中,将解压缩后的带版本号的js文件名修改为phonegap.js)到/assets/www。
  复制phonegap.jar(从PhoneGap解压缩后的Android目录中,将解压缩后的带版本号的jar文件名修改为phonegap.jar)到/libs。
  复制xml整个目录(从PhoneGap解压缩后的Android目录中,包括一个plugins.xml)到/res。【v1.0 rc2以上】
  对Eclipse的src文件夹中的主要Java文件进行少量调整:(如下图)
  将class的继承由Activity改为DroidGap
  将setContentView()替换为super.loadUrl(“file:///android_asset/www/index.html”);
  添加import com.phonegap.*;
  移除import android.app.Activity;
  在这里你可能会遇到Eclipse找不到phonegap-1.0.0.jar的错误。在这种情况下,右键单击/libs文件夹找到BuildPaths/ > Configure Build Paths。然后在Libraries标签页中添加phonegap-1.0.0.jar到项目中。如果Eclipse不是很稳定,你需要点击F5刷新一次项目。
  右键单击AndroidManifest.xml并选择Open With > Text Editor。
  将下面的权限设置拷贝到versionName之后(这个可以根据APP的具体情况而定):
  android:largeScreens=”true”
  android:normalScreens=”true”
  android:smallScreens=”true”
  android:resizeable=”true”
  android:anyDensity=”true”
  />
  在AndroidManifest的activity标签中添加android:configChanges="orientation|keyboardHidden"。
  7、Hello橘子博客
  在“/assets/www”目录中新建文件“index.html”,并粘贴如下代码:
  你好, 橘子博客。
  8、部署到模拟器
  右键单击项目节点选择Run As,然后点击AndroidApplication。
  Eclipse将要求你选择一个合适的AVD,如果没有设置的话,你需要创建一个AVD。
  9、部署到设备
  通过设置手机USB debugging选项,并已将设备连接到电脑。(设置 > 应用程序 > 开发)。或者直接安装到手机查看效果。
  相对来说,这个搭建过程是比较完整的,希望可以给大家的学习带来帮助。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: