HTML5实战之20行代码实现打地鼠(HolaStudio特别版)

前言:

Tangide已经全面迁移到新域名studio.holaverse.com,加入更多特性,性能更稳定,控件更丰富,点此了解。原域名已经不再维护,项目迁移方法参考如何将游戏从tangide导入至Hola Studio

在开始开始进行开发打地鼠前,先了解Cantk的几大特性。

事件驱动的开发

事件驱动的开发是Cantk最重要的特性之一,这些事件应该是真实世界中的事件(至少大部分是),是开发者脑海中最先想到的概念,Cantk中的事件列表参见Cantk Event List,这里面的事件直观易懂,比如点击事件、碰撞开始事件。举个例子,我希望一个球形刚体,在下落碰到地面时播放一个音效,点击它时让他消失。那么,我最先想到的方式,就是让球形刚体监听两个事件:点击事件和碰撞开始事件,在点击事件中写播放音效的代码,在碰撞开始事件写删除自己的代码。在Hola Studio里面要实现这两个功能需要多少代码呢,答案是两行,两个功能各一行。

基于组件的开发

组件可以理解为模板,Cantk(结合Hola Studio)的组件系统具有如下特点

  • 方便高效,创建的组件自动保存在服务端,你可导出到本地,也可以选择从本地导入,参考如何导入导出组件
  • 任意粒度,你可以把小到一张图片一个按钮做成组件,大到一个场景一个游戏做成组件。
  • 便于分享,一方面在生成组件时,你可以选择三类所有者:个人、项目、组织,选择组织时,所有组织的开发者都可以看到你导出的组件。另一方面,你可以以json格式下载到本地,分享给任意开发者。

数据驱动的开发

UI数据和各种设置放在独立的JSON文件中,游戏运行时由引擎加载场景数据和相应的资源。所有界面设计都在IDE中完成,不需要编写一行代码。

结合以上Cantk的特性,来看看凭什么20多行代码就能完成一个完整的打地鼠游戏。
先放上游戏效果,可以点击预览链接
http://studio.holaverse.com/apprun.html?mode=preview&user_id=0f4a0994-b11d-494f-bfa0-a1a006a63d01&game_key=cfbd5e1fae2243b5a20731623aad544d&company_id=1cd6f6b2-30ae-43fc-8b87-25ff89e27699
点击扫描二维码
这里写图片描述

或者点击链接导入到自己的游戏列表
http://studio.holaverse.com/?mode=preview&user_id=0f4a0994-b11d-494f-bfa0-a1a006a63d01&game_key=cfbd5e1fae2243b5a20731623aad544d&company_id=1cd6f6b2-30ae-43fc-8b87-25ff89e27699

来整个游戏需要的组件:
1、地鼠组件,用来播放地鼠帧动画,当然,帧动画本身也是一个组件。
2、时钟组件,用来控制地鼠的出洞的动作。
3、锤子组件,其实就是图片组件,用来模拟真实的锤子。
4、其他点缀组件,比如背景,记分牌什么的。

需要的事件:
1、点击事件(onClick),用户打击地鼠(点击屏幕),触发这个事件。
2、时钟超时事件(onTimeout),周期性触发这个事件。

界面编辑

界面摆放的过程与Tangide大同小异,可以参考上一篇博客,我们看在Hola Studio上各个界面控件树形图和界面效果。

开始界面

控件树形图:
这里写图片描述

界面效果:
这里写图片描述

结束界面

控件树形图
这里写图片描述

界面效果
这里写图片描述

游戏界面

控件树形图
这里写图片描述

界面效果:
这里写图片描述

事件的编辑

事件离不开组件,事件的作用对象是组件,组件可以触发事件。

点击事件

点击事件是针对地鼠的,事件的代码理所当然写在地鼠的onClick里面,这里虽然有16个地鼠,但是只要写好一个地鼠,将其生成组件,其余的地鼠只需要通过组件生成即可。

var win = this.getWindow();
win.hammer.setPosition(this.getParent().x,this.getParent().y);
win.hammer.animate("down");
win.playSoundEffect("击打.mp3", function onDone() {console.log("play finished");});
win.score++;
win.find("云/计分板/得分").setValue(win.score);
var ele = this;
ele.play("hit", 2, function() {
    ele.play("out");
});
时钟超时事件

时钟是一个独立的组件,放在场景中作为场景的子控件.
其中一个时钟用于每0.5秒随机选择一个地鼠出洞。
这里写图片描述

var win = this.getWindow();
var index = Math.floor(Math.random() * 16);
var gopher = win.find("切图-" + index).getChild(0);
if(gopher.y === 100) {  //这里根据地鼠的位置来判断是否已经是出洞状态,非出洞状态才播放出洞动画。
    gopher.animate("up");
}

另外一个时钟用来判定游戏结束,因为游戏时间限定在30秒。
这里写图片描述

var initData = this.getWindow().score;
this.openWindow("结束界面", 
    function (retData) {console.log("window closed.");}, false, initData);
地鼠的出入洞效果

地鼠的出入洞效果,可以通过剪切控件来实现。
1、调用setClipRect,设置控件的矩形裁剪区域。这里的地鼠就是用这种方法。
在窗口的onBeforeOpen事件中初始化:

var win = this.getWindow();
win.resetGame();
win.score = 0;
win.hammer = win.find("锤子");
win.hammer.setPivot(1,0.5);
for(var i = 0; i < 16; i++) {
    var gopher = win.find("切图-" + i).getChild(0);
    gopher.setPosition(gopher.x, gopher.y + 100);
    gopher.getParent().setClipRect(0, 0, gopher.w, gopher.h);
}

2、调用setClipCircle,设置控件的圆形裁剪区域。
3、你也可以重写onClip方法实现任意形状的裁剪:

var el = this.getWindow().find("el");

el.onClip = function(ctx2d) {
    ctx2d.beginPath();
    ctx2d.moveTo(0, 0);
    ctx2d.lineTo(100, 100);
    ctx2d.lineTo(100, 200);
    ctx2d.closePath();
    ctx2d.clip();
}

Hola Studio新增特性

接下来我们Hola Studio新增的特性的使用方法。

控件锁

在编辑器里面,界面元素摆放的位置,通常需要很精确,摆好之后,不小心被拖动是件很头疼的事情,因此需要锁定它的位置,类似的功能flash中也有。在Hola Studio中,这样的锁,在控件树形图的右侧,鼠标在悬浮在上面的时候,会显示出来,这个时候你点击它锁定控件,就再也不用担心因为误操作弄乱控件的位置了。
这里写图片描述

隐藏开关

在控件锁的右边,就是隐藏开关,隐藏开关非常有用,游戏场景中通常有很多层,当上一层的元素完全盖住下一层的元素,你就没有办法操作到下一层的控件了,这时候可以点击隐藏开关隐藏上一层元素。
这里写图片描述
值得一提的是,这里隐藏跟游戏中的不可见是两回事,游戏中的隐藏可以通过通用属性面板中的运行时可见来控制。
这里写图片描述

克隆当前项目

某些情况下,你需要复制一份当前的项目,但是不可能重新做一遍游戏,因此文件菜单中的“克隆当前项目“可以完成这个工作。你只需要输入新的项目名称,然后点击确定,就能在游戏项目列表中发现多出来一个一模一样的项目。与原来的项目互不影响。
这里写图片描述

添加外部字体

参考引入外部字体库

国际化字符串(多语言)设置

如果你的游戏需要走海外渠道,多语言是必不可少的,在Hola Studio中,多语言的配置将异常简单。
这里写图片描述
在国际化设置中,添加你想要支持的语种,并将翻译好的字符串添加到对应的语言表里即可。
这里写图片描述
在程序中,这样设置控件的字符串。

var me = this;
var win = this.getWindow();
var title = dappGetText("Beat Gopher"); //dappGetText会自动获取与当前浏览器语种匹配的字符串
win.find("label").setText(title);

最终在英文下显示“Beat Gopher“的控件会显示“打地鼠“。

多资源配置

在资源管理中,有时多语种字符串,有时可能在不同语种下会用到不同的图片资源。另外一些情况下,不同分辨率用的资源也不一样,这是可以在“项目设置“-“资源配置中“配置资源。
参考Hola Studio资源配置方法

更多新特性,点击欧拉开发者中心

或者加群讨论
这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值