玩一玩游戏之Hello World

版权声明:本文为博主原创文章,欢迎转载,转载标明出处(http://blog.csdn.net/zyw_java)。微信公众号:javenlife https://blog.csdn.net/zyw_java/article/details/80531380

环境搭建

由于目前玩一玩开发平台仅支持Mac,所以你需要一台Mac电脑或者黑苹果(但不推荐)

1、注册苹果账号
2、安装Xcode (建议在App Store中下载避免更新带来不必要的麻烦)
3、安装Android Studio (非必须,Android调试看日志很实用)
4、第三方JavaScript编辑器(非必须)

推荐安装
iTerm2替代默认终端(Terminal)
iTerm2个性化主题配置
Sublime Text 3
sublime text 3 插件推荐

下载引擎代码

有了之前的准备工作,下面就来下载引擎代码

玩一玩游戏平台使用的是自研Bricks引擎,他们通过Bitbucket来维护引擎代码,通过授权的开发者可以在上面下载到引擎。

官方托管地址
https://bitbucket.org/wesleyxiao/publicbrickengine
授权后下载地址
https://Javen205@bitbucket.org/wesleyxiao/publicbrickengine.git

cd  /Users/Javen/Documents/workspace/git
git clone https://Javen205@bitbucket.org/wesleyxiao/publicbrickengine.git

Hello World

Bitbucket中clone下来后目录结构如下

双击PublicBrickEngineGame.xcodeproj将项目在Xcode中打开,如果你是苹果开发者可以忽略以下新手指引步骤

这里写图片描述

这里需要我们添加这个苹果账号并进行签名

修改Bundle Identifier 后再次Try Again

恭喜项目配置完成,下面来介绍一下引擎目录

主要包括
1、游戏的配置文件:横屏、竖屏等
2、游戏入口即启动后首先加载的JS
3、游戏的资源文件(默认是Demo示例的资源文件)
4、引擎封装的核心JS库
5、Demo示例

基本目录介绍完了,我们来实现一个简单的Hello Word

修改配置文件

修改游戏配置文件gameConfig.json

{
    "enterUrl": "", //H5游戏链接地址,H5游戏必填。非H5游戏不填
    "viewMode": 1 //控制横竖屏状态:1.竖屏 2.左横屏(home键在左边)3.右横屏(home键在右边)
}

需求实现

现在手机屏幕中间显示Hello World

我们在入口JS main.js中做适当的修改,修改后的代码如下

// iPhone 6 (750x1334) 的分辨率为标准进行缩放。
DESIGN_WIDTH = 750
DESIGN_HEIGHT = 1334
var scale = BK.Director.screenPixelSize.width / DESIGN_WIDTH;
BK.Director.root.scale = {
    x: scale,
    y: scale
};
//设置文本样式
var style = {
    "fontSize": 30, //字号
    "textColor": 0xFFFF0000, //颜色  ARGB编码
    "maxWidth": 600, //最大宽度
    "maxHeight": 500, //最大高度
    "width": 500, //宽度
    "height": 400, //高度
    "textAlign": 1, //对其方式 0左 1中 2右
    "bold": 1, //粗体
    // "italic": 1, //斜体
    // "strokeColor": 0xFF000000, //描边
    // "strokeSize": 5, //描边宽
    // "shadowRadius": 5, //阴影圆角半径
    // "shadowDx": 10, //阴影x偏移
    // "shadowDy": 10, //阴影y偏移
    // "shadowColor": 0xFFFF0000 //阴影颜色
}
//实例化BK.Text 文本
var txt = new BK.Text(style, "Hello world  \n\n\n\n IJPay 让支付触手可及 \n\n https://gitee.com/javen205/IJPay \n\n By Javen");
//设置锚点
txt.anchor = {
    x: 0.5,
    y: 0.5
};
//设置位置
txt.position = {
    x: DESIGN_WIDTH / 2,
    y: DESIGN_HEIGHT / 2
};
//将文本添加到根节点
BK.Director.root.addChild(txt);

运行测试

选择一个设备(模拟器或者真机)按快捷键command+b构建项目,如果提示Build Succeeded即构建完成。如果出现异常就根据异常提示进行修改。

运行效果图如下

手Q中测试

此时我们需要下载特殊版本的手Q并安装到手机。

假如你游戏的ID为:2004(可以登录到hudong.qq.com查看)

苹果手机操作步骤

  • 游戏资源文件打包为cmshow_game_2004.zip
  • 将压缩包传到QQ中并下载
  • Q消息面板中点击下载的压缩包
  • 点击下载好的压缩包再点击”移动至游戏文件夹”即可
  • Q面板中唤起指定的游戏点击即可测试刚才的游戏资源

安卓手机操作步骤

  • 游戏资源文件推送到游戏资源目录
  • 关闭设置中的厘米秀游戏资源校验和更新来避免验证签名下载线上的资源包
  • Q面板中唤起指定的游戏点击即可测试刚才的游戏资源

安卓游戏资源目录为/sdcard/tencent/MobileQQ/.apollo/game/2004

这里的示例比较简单简单没有引用任何第三方资源,所以游戏资源包内容仅仅只需要刚刚写的main.js

特殊版本手Q下载:公众号(javenlife)后台回复 特殊版本手Q

调试打包参考
开发环境搭建与调试
官方文档-开发者调试

如有疑问欢迎留言讨论

没有更多推荐了,返回首页