在游戏开发中,经常需要实现各种动态效果,如移动元素、改变透明度等。本文将介绍如何创建这些功能,并展示如何使用物理引擎、代码管理和调试技巧,以及如何实现多语言支持和分享功能。
首先,需要创建一个图像元素,并为其重新命名。然后,创建一个按钮。目标是:当按钮被点击时,图像在1秒后移动到新位置(x=300, y=300),然后旋转180度,最后逐渐消失。
点击按钮的onClick事件,进入代码编辑器。使用代码生成器定位图像,然后点击“生成代码”。编辑代码,为其赋予一个新的变量,例如:
var image_a = win.find("image");
使用config1使元素在1秒后移动到x=300, y=300的位置。duration表示移动所需的时间(以毫秒为单位),delay表示延迟的时间(以毫秒为单位)。
var config1 = {
x: 300,
y: 300,
duration: 1000,
delay: 1000
};
使用config2使元素旋转180度。“rotation”是以弧度为单位,而不是度数。
var config2 = {
rotation: Math.PI,
duration: 1000
};
使用config3使元素逐渐消失。
var config3 = {
duration: 1000,
opacity: 0
};
将三个配置组合起来,使元素执行这些配置。
config1.next = config2;
config2.next = config3;
image_a.animate(config1);
预览游戏,点击按钮,元素将执行其动作。
这个游戏解决方案完美地集成了box2d,用于实现真正的可视化和易于操作。如何使一个物体从空中落下并与地面发生弹性碰撞。
地面:在元素列表中找到正方形刚体,将其拖入游戏场景,并拉动矩形元素。在“唯一属性”栏中找到密度并将其更改为0,以模拟地面。对于空中的物体,将圆形或正方形刚体拖入场景。
预览游戏。点击按钮,使地面上的物体具有向上的速度。
在上述演示的基础上:
在场景中创建一个按钮。点击按钮的onClick事件以进入代码编辑器。使用代码生成器设置对象的速度。设置x和y方向上的速度(右和下为正值,左和上为负值),然后点击“生成代码”。
保存代码,预览它,点击按钮以实现效果!
有两种类型的代码管理。如果是一个相当小的游戏,可以在场景的beforeOpen事件中提前创建一些游戏逻辑和函数,并在需要时调用它们。也可以将游戏的业务逻辑打包成一个独立的JavaScript文件,然后将其导入游戏,供游戏使用。已经做了一个演示来展示具体的细节。
在场景的beforeOpen事件中编写逻辑和代码。将按钮和图像拖入游戏场景。点击按钮的事件,然后编写一个函数。这个函数应该使图像移动到x=300, y=300的位置。
var me = this;
var win = this.getWindow();
var img = win.find("image");
window.moveImg = function() {
var config = {
x: 300,
y: 300,
duration: 1000
};
img.animate(config);
}
在按钮的onClick事件中,可以调用window.moveImg()函数来打包业务逻辑以供使用。
window.moveImg()
导入游戏逻辑代码:
按照上述步骤进行业务逻辑。点击任何事件以进入代码编辑器。然后点击文件>新建,并输入game.js。
编写游戏的业务逻辑代码,如下所示(如所示):
var Game = {};
Game.init = function(win) {
Game.win = win;
}
Game.moveImg = function() {
var img = Game.win.find("image");
var config = {
x: 300,
y: 300,
duration: 1000
};
img.animate(config);
}
可以根据前面的代码管理步骤来调试游戏。预览游戏,并打开控制面板:
如果代码逻辑被写入场景的beforeOpen函数,可以使用以下调试方法:导航到control/js文件夹并找到ui-call-events-handler.js文件。这个文件包含了场景的所有事件。刚刚提到的代码在场景的beforeOpen中,在那里设置一个断点,然后调试那里编写的代码。
如果为游戏的逻辑代码创建了一个外部JavaScript文件,可以使用以下调试方法:导航到storage文件夹并找到game.js文件。这个文件的右侧将有代码,可以在函数处设置一个断点,以调试它。
这个平台的自适应屏幕使用宽度与屏幕边缘成比例的高度缩放的自适应解决方案。对于横屏,建议使用Android分辨率比例。对于竖屏,建议使用iPhone 5分辨率比例。
在元素栏>扩展元素中,找到分享按钮并将其拖入游戏场景。如果想编辑要分享的内容,只需要点击分享按钮的onClick事件并进行编辑。
分享标题:shareInfo.title(默认为游戏名称)
分享内容:shareInfo.desc(默认为游戏描述)
分享链接:shareInfo.link(默认为当前链接)
分享图标:shareInfo.appIcon(默认为游戏图标)
默认数据可以在菜单栏>选项>项目设置中找到。
当游戏结束时,只需要调用接口HolaSDK.gameOver(score, level, duration):
score = 当前得分
level = 当前级别
duration = 游戏持续时间
在元素栏>扩展元素中,找到广告按钮并将其拖入游戏场景。当需要显示广告时(例如,有一个按钮触发广告弹出),进入代码编辑器,定位代码生成器,点击“激活对象”,定位广告元素,然后点击“生成代码”。
游戏可能会在多种语言中发布。如何配置本地化?
可以使用一个字符串来说明这个例子。在中文环境中,希望这个字符串显示为“好世界”。在英文环境中,希望它显示为“Hello, world”。
将一个文本元素拖入游戏场景。在菜单栏中找到>工具>本地化设置,然后点击它,可以看到它已经提取了游戏的文本内容。在“中文”下,可以编辑JSON值的标签为“好世界”,然后在同一个地方在“英文”下,将其更改为“Hello, world”。保存它,本地化就完成了!
如何使用代码检索特定语言环境中的相应标签值?
var str = webappGetText("Label");
console.log(str);