给大家在编写h5游戏上带来一些启发betway体育ap

背景介绍

一年一度的双十一狂欢购物节即将拉开序幕,H5 互动类小游戏作为京东微信手Q营销特色玩法,在今年预热期的第一波造势中,势必要玩点新花样,主要肩负着社交传播和发券的目的。推金币以传统街机推币机为原型,结合手机强大的能力和生态衍生出可玩性很高的玩法。

三、刚体

为什么把刚体半径做得稍小呢,这也是受这篇文章 推金币 里金币的做法所启发。推金币游戏中,为了达到金币间的堆叠效果,作者很聪明地把刚体做得比贴图小,这样当刚体挤在一起时,贴图间就会层叠起来。所以这样做是为了使环之间稍微有点重叠效果,更重要的也是当两个紧贴的环不会因翻转角度太接近而显得留白太多。如图:

betway体育app 1

为了模拟环在水中运动的效果,可以选择给环加一些空气摩擦力。另外在实物游戏里,环是塑料做成的,碰撞后动能消耗较大,因此可以把环的 restitution 值调得稍微小一些。

需要注意 Matter.js 中因为各种物理参数都是没有单位的,一些物理公式很可能用不上,只能基于其默认值慢慢进行微调。下面的 frictionAir 和 restitution 值就是我慢慢凭感觉调整出来的:

JavaScript

this.body = Matter.Bodies.circle(x, y, r, { frictionAir: 0.02, restitution: 0.15 })

1
2
3
4
this.body = Matter.Bodies.circle(x, y, r, {
  frictionAir: 0.02,
  restitution: 0.15
})

四、生成篮球施加力度

大致初始了一个简单的场景,只有背景和篮框,接下来是加入投篮。

每次在 MOUSE_UP 事件的时候我们就生成一个圆形的刚体, isStatic: false 我们要移动所以不固定篮球,并且设置 density 密度、restitution 弹性、刚体的背景 sprite 等属性。

将获得的两个值:距离和角度,通过 applyForce 方法给生成的篮球施加一个力,使之投出去。

JavaScript

... addBall: function(x, y) { var ball = Matter.Bodies.circle(500, 254, 28, { // x, y, 半径 isStatic: false, // 不固定 density: 0.68, // 密度 restitution: 0.8, // 弹性 render: { visible: true, // 开启渲染 sprite: { texture: 'images/ball.png', // 设置为篮球图 xOffset: 28, // x 设置为中心点 yOffset: 28 // y 设置为中心点 } } }); } Matter.Body.applyForce(ball, ball.position, { x: x, y: y }); // 施加力 Matter.World.add(this.engine.world, [ball]); // 添加到世界 ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
addBall: function(x, y) {
    var ball = Matter.Bodies.circle(500, 254, 28, { // x, y, 半径
        isStatic: false, // 不固定
        density: 0.68, // 密度
        restitution: 0.8, // 弹性
        render: {
            visible: true, // 开启渲染
            sprite: {
                texture: 'images/ball.png', // 设置为篮球图
                xOffset: 28, // x 设置为中心点
                yOffset: 28 // y 设置为中心点
            }
        }
    });
}
Matter.Body.applyForce(ball, ball.position, { x: x, y: y }); // 施加力
Matter.World.add(this.engine.world, [ball]); // 添加到世界
...

前言

本次是与腾讯手机充值合作推出的活动,用户通过氪金充值话费或者分享来获得更多的投篮机会,根据最终的进球数排名来发放奖品。

用户可以通过滑动拉出一条辅助线,根据辅助线长度和角度的不同将球投出,由于本次活动的开发周期短,在物理特性实现方面使用了物理引擎,所有本文的分享内容是如何结合物理引擎去实现一款投篮小游戏,如下图所示。

betway体育app 2

GameController脚本

  创建GameController脚本来控制游戏的核心逻辑,包括游戏中陨石障碍物的掉落,游戏结束控制,游戏重开控制,分数统计等。

 1 using UnityEngine;
 2 using System.Collections;
 3 using UnityEngine.UI;
 4 using UnityEngine.SceneManagement;
 5 
 6 public class GameController : MonoBehaviour {
 7 
 8     public GameObject hazard;
 9     public Vector3 spawnValue;
10     public int hazardCount;
11     public float spawnWait;
12     public float starWait;
13     public float waveWait;
14 
15     private int score;
16     public Text scoreText;
17 
18     public Text gameOverText;
19     private bool gameOver;
20 
21     public Text restartText;
22     public bool restart;
23     // Use this for initialization
24     void Start () {
25         gameOverText.text = "";
26         gameOver = false;
27 
28         restartText.text = "";
29         restart = false;
30 
31         score = 0;
32         UpdateScore();
33        StartCoroutine( SpawnWave());
34     }
35 
36     void Update()
37     {
38         if (restart)
39         {
40             if (Input.GetKeyDown(KeyCode.R))
41             {
42                 //Application.LoadLevel(Application.loadedLevel);
43                 SceneManager.LoadScene("Mytest");
44             }
45 
46         }
47     }
48     IEnumerator SpawnWave()
49     {
50         while (true)
51         {
52             yield return new WaitForSeconds(starWait);
53             for (int i = 0; i < hazardCount; i++)
54             {
55                 Vector3 spawnPosition = new Vector3(Random.Range(-spawnValue.x, spawnValue.x),
56                 spawnValue.y,
57                 spawnValue.z);
58                 Quaternion spawRotation = Quaternion.identity;
59                 Instantiate(hazard, spawnPosition, spawRotation);
60                 yield return new WaitForSeconds(spawnWait);
61 
62                 if (gameOver)
63                 {
64                     restart = true;
65                     restartText.text = "Press 'R' to Restart";
66                 }
67             }
68             yield return new WaitForSeconds(waveWait);
69         }
70     }
71 
72     public void GameOver()
73     {
74         gameOver = true;
75         gameOverText.text = "GameOver";
76     }
77 
78     void UpdateScore()
79     {
80         scoreText.text = "Score: " + score;
81     }
82     public void addScore(int value)
83     {
84         score += value;
85         UpdateScore();
86     }
87 }

MonoBehaviour.StartCoroutine 开始协同程序

 

function StartCoroutine (routine : IEnumerator) : Coroutine

Description描述

Starts a coroutine.

开始协同程序。

The execution of a coroutine can be paused at any point using the yield statement. The yield return value specifies when the coroutine is resumed. Coroutines are excellent when modelling behaviour over several frames. Coroutines have virtually no performance overhead. StartCoroutine function always returns immediately, however you can yield the result. This will wait until the coroutine has finished execution.

一个协同程序在执行过程中,可以在任意位置使用yield语句。yield的返回值控制何时恢复协同程序向下执行。协同程序在对象自有帧执行过程中堪称优秀。协同程序在性能上没有更多的开销。StartCoroutine函数是立刻返回的,但是yield可以延迟结果。直到协同程序执行完毕。

When using JavaScript it is not necessary to use StartCoroutine, the compiler will do this for you. When writing C# code you must call StartCoroutine.

用javascript不需要添加StartCoroutine,编译器将会替你完成.但是在C#下,你必须调用StartCoroutine。

 

前期预研

在体验过 AppStore 上好几款推金币游戏 App 后,发现游戏核心模型还是挺简单的,不过 H5 版本的实现在网上很少见。由于团队一直在做 2D 类互动小游戏,在 3D 方向暂时没有实际的项目输出,然后结合此次游戏的特点,一开始想挑战用 3D 来实现,并以此项目为突破口,跟设计师进行深度合作,抹平开发过程的各种障碍。

betway体育app 3

由于时间紧迫,需要在短时间内敲定方案可行性,否则项目延期人头不保。在快速尝试了 Three.js + Ammo.js 方案后,发现不尽人意,最终因为各方面原因放弃了 3D 方案,主要是不可控因素太多:时间上、设计及技术经验上、移动端 WebGL 性能表现上,主要还是业务上需要对游戏有绝对的控制,加上是第一次接手复杂的小游戏,担心项目无法正常上线,有点保守,此方案遂卒。

如果读者有兴趣的话可以尝试下 3D 实现,在建模方面,首推 Three.js ,入手非常简单,文档和案例也非常详实。当然入门的话必推这篇 Three.js入门指南,另外同事分享的这篇 Three.js 现学现卖 也可以看看,这里奉上粗糙的 推金币 3D 版 Demo

初始化

游戏的初始化接口主要做了4件事情:

  1. 参数初始化
  2. CreateJS 显示元素(display object)的布局
  3. Matter.js 刚体(rigid body)的布局
  4. 事件的绑定

下面主要聊聊游戏场景里各种元素的创建与布局,即第二、第三点。

五、加入其他刚体、软体

现在,已经能顺利的将篮球投出,现在我们还需要加入一个篮球网、篮框、篮架。

通过 Matter.js 加入一些刚体和软体并且赋予物理特性 firction 摩擦力、frictionAir 空气摩擦力等, visible: false 表示是否隐藏,collisionFilter 是过滤碰撞让篮球网之间不产生碰撞。

JavaScript

... addBody: function() { var group = Matter.Body.nextGroup(true); var netBody = Matter.Composites.softBody(1067, 164, 6, 4, 0, 0, false, 8.5, { // 篮球网 firction: 1, // 摩擦力 frictionAir: 0.08, // 空气摩擦力 restitution: 0, // 弹性 render: { visible: false }, collisionFilter: { group: group } }, { render: { lineWidth: 2, strokeStyle: "#fff" } }); netBody.bodies[0].isStatic = netBody.bodies[5].isStatic = true; // 将篮球网固定起来 var backboard = Matter.Bodies.rectangle(1208, 120, 50, 136, { // 篮板刚体 isStatic: true, render: { visible: true } }); var backboardBlock = Matter.Bodies.rectangle(1069, 173, 5, 5, { // 篮框边缘块 isStatic: true, render: { visible: true } }); Matter.World.add(this.engine.world, [ // 四周墙壁 ... Matter.Bodies.rectangle(667, 5, 1334, 10, { // x, y, w, h isStatic: true }), ... ]); Matter.World.add(this.engine.world, [netBody, backboard, backboardBlock]); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
...
addBody: function() {
    var group = Matter.Body.nextGroup(true);
    var netBody = Matter.Composites.softBody(1067, 164, 6, 4, 0, 0, false, 8.5, { // 篮球网
        firction: 1, // 摩擦力
        frictionAir: 0.08, // 空气摩擦力
        restitution: 0, // 弹性
        render: { visible: false },
        collisionFilter: { group: group }
    }, {
        render: { lineWidth: 2, strokeStyle: "#fff" }
    });
    netBody.bodies[0].isStatic = netBody.bodies[5].isStatic = true; // 将篮球网固定起来
    var backboard = Matter.Bodies.rectangle(1208, 120, 50, 136, { // 篮板刚体
        isStatic: true,
        render: { visible: true }
    });
    var backboardBlock = Matter.Bodies.rectangle(1069, 173, 5, 5, { // 篮框边缘块
        isStatic: true,
        render: { visible: true }
    });
    Matter.World.add(this.engine.world, [ // 四周墙壁
        ...
        Matter.Bodies.rectangle(667, 5, 1334, 10, { // x, y, w, h
            isStatic: true
        }),
        ...
    ]);
    Matter.World.add(this.engine.world, [netBody, backboard, backboardBlock]);
}

betway体育app 4

六、判断进球、监听睡眠状态

通过开启一个 tick 事件不停的监听球在运行时的位置,当到达某个位置时判定为进球。

另外太多的篮球会影响性能,所以我们使用 sleepStart 事件监听篮球一段时间不动后,进入睡眠状态时删除。

JavaScript

... Matter.Events.on(this.engine, 'tick', function() { countDown++; if (ball.position.x > 1054 && ball.position.x < 1175 && ball.position.y > 170 && ball.position.y < 180 && countDown > 2) { countDown = 0; console.log('球进了!'); } }); Matter.Events.on(ball, 'sleepStart', function() { Matter.World.remove(This.engine.world, ball); }); ...

1
2
3
4
5
6
7
8
9
10
11
12
...
Matter.Events.on(this.engine, 'tick', function() {
    countDown++;
    if (ball.position.x > 1054 && ball.position.x < 1175 && ball.position.y > 170 && ball.position.y < 180 && countDown > 2) {
        countDown = 0;
        console.log('球进了!');
    }
});
Matter.Events.on(ball, 'sleepStart', function() {
    Matter.World.remove(This.engine.world, ball);
});
...

到此为止,通过借助物理引擎所提供的碰撞、弹性、摩擦力等特性,一款简易版的投篮小游戏就完成了,也推荐大家阅读另一位同事的文章【H5游戏开发】推金币 ,使用了 CreateJS + Matter.js 的方案,相信对你仿 3D 和 Matter.js 的使用上有更深的了解。

最后,此次项目中只做了一些小尝试,Matter.js 能实现的远不止这些,移步官网发现更多的惊喜吧,文章的完整 Demo 代码可【点击这里】。

如果对「H5游戏开发」感兴趣,欢迎关注我们的专栏。

Unity初探—SpaceShoot

 


结语

感谢各位耐心读完,希望能有所收获,有考虑不足的地方欢迎留言指出。

进针条件

H5 游戏开发:决胜三分球

2017/11/18 · HTML5 · 游戏

原文出处: 凹凸实验室   

一、初始化游戏引擎

首先对 LayaAir 游戏引擎进行初始化设置,Laya.init 创建一个 1334×750 的画布以 WebGL 模式去渲染,渲染模式下有 WebGL 和 Canvas,使用 WebGL 模式下会出现锯齿的问题,使用 Config.isAntialias 抗锯齿可以解决此问题,并且使用引擎中自带的多种屏幕适配 screenMode

如果你使用的游戏引擎没有提供屏幕适配,欢迎阅读另一位同事所写的文章【H5游戏开发:横屏适配】。

JavaScript

... Config.isAntialias = true; // 抗锯齿 Laya.init(1334, 750, Laya.WebGL); // 初始化一个画布,使用 WebGL 渲染,不支持时会自动切换为 Canvas Laya.stage.alignV = 'top'; // 适配垂直对齐方式 Laya.stage.alignH = 'middle'; // 适配水平对齐方式 Laya.stage.screenMode = this.Stage.SCREEN_HORIZONTAL; // 始终以横屏展示 Laya.stage.scaleMode = "fixedwidth"; // 宽度不变,高度根据屏幕比例缩放,还有 noscale、exactfit、showall、noborder、full、fixedheight 等适配模式 ...

1
2
3
4
5
6
7
8
...
Config.isAntialias = true; // 抗锯齿
Laya.init(1334, 750, Laya.WebGL); // 初始化一个画布,使用 WebGL 渲染,不支持时会自动切换为 Canvas
Laya.stage.alignV = 'top'; // 适配垂直对齐方式
Laya.stage.alignH = 'middle'; // 适配水平对齐方式
Laya.stage.screenMode = this.Stage.SCREEN_HORIZONTAL; // 始终以横屏展示
Laya.stage.scaleMode = "fixedwidth"; // 宽度不变,高度根据屏幕比例缩放,还有 noscale、exactfit、showall、noborder、full、fixedheight 等适配模式
...

DestroyByBoundary脚本(C#)

  在游戏中我们添加了一个Cube正方体,让他来作为游戏的边界。它是可以触发触发事件的(勾选Is Trigger),当游戏中的碰撞体结束trigger事件,也就是出了正方体边界,我们就将其销毁。

1 void OnTriggerExit(Collider other)
2     {
3         Destroy(other.gameObject);
4     }

Description描述

OnTriggerExit is called when the Colliderother has stopped touching the trigger .

当Collider(碰撞体)停止触发trigger(触发器)时调用OnTriggerExit。


 

技能设计

写好游戏主逻辑之后,技能就属于锦上添花的事情了,不过让游戏更具可玩性,想想金币哗啦啦往下掉的感觉还是很棒的。

抖动:这里取了个巧,是给舞台容器添加了 CSS3 实现的抖动效果,然后在抖动时间内让所有的金币的 y 坐标累加固定值产生整体慢慢前移效果,由于安卓下支持系统震动 API,所以加了个彩蛋让游戏体验更真实。

CSS3 抖动实现主要是参考了 csshake 这个样式,非常有意思的一组抖动动画集合。

JS 抖动 API

JavaScript

// 安卓震动 if (isAndroid) { window.navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; window.navigator.vibrate([100, 30, 100, 30, 100, 200, 200, 30, 200, 30, 200, 200, 100, 30, 100, 30, 100]); window.navigator.vibrate(0); // 停止抖动 }

1
2
3
4
5
6
// 安卓震动
if (isAndroid) {
  window.navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
  window.navigator.vibrate([100, 30, 100, 30, 100, 200, 200, 30, 200, 30, 200, 200, 100, 30, 100, 30, 100]);
  window.navigator.vibrate(0); // 停止抖动
}

伸长:伸长处理也很简单,通过改变推板移动的最大 y 坐标值让金币产生更大的移动距离,不过细节上有几点需要注意的地方,在推板最大 y 坐标值改变之后需要保持移动速度不变,不然就会产生「瞬移」(不平滑)问题。

前言

虽然本文标题为介绍一个水压套圈h5游戏,但是窃以为仅仅如此对读者是没什么帮助的,毕竟读者们的工作生活很少会再写一个类似的游戏,更多的是面对需求的挑战。我更希望能举一反三,给大家在编写h5游戏上带来一些启发,无论是从整体流程的把控,对游戏框架、物理引擎的熟悉程度还是在某一个小难点上的思路突破等。因此本文将很少详细列举实现代码,取而代之的是以伪代码展现思路为主。

游戏 demo 地址:

一、初始化游戏引擎

首先对 LayaAir 游戏引擎进行初始化设置,Laya.init 创建一个 1334×750 的画布以 WebGL 模式去渲染,渲染模式下有 WebGL 和 Canvas,使用 WebGL 模式下会出现锯齿的问题,使用 Config.isAntialias 抗锯齿可以解决此问题,并且使用引擎中自带的多种屏幕适配 screenMode

如果你使用的游戏引擎没有提供屏幕适配,欢迎阅读另一位同事所写的文章【H5游戏开发:横屏适配】。

JavaScript

... Config.isAntialias = true; // 抗锯齿 Laya.init(1334, 750, Laya.WebGL); // 初始化一个画布,使用 WebGL 渲染,不支持时会自动切换为 Canvas Laya.stage.alignV = 'top'; // 适配垂直对齐方式 Laya.stage.alignH = 'middle'; // 适配水平对齐方式 Laya.stage.screenMode = this.Stage.SCREEN_HORIZONTAL; // 始终以横屏展示 Laya.stage.scaleMode = "fixedwidth"; // 宽度不变,高度根据屏幕比例缩放,还有 noscale、exactfit、showall、noborder、full、fixedheight 等适配模式 ...

1
2
3
4
5
6
7
8
...
Config.isAntialias = true; // 抗锯齿
Laya.init(1334, 750, Laya.WebGL); // 初始化一个画布,使用 WebGL 渲染,不支持时会自动切换为 Canvas
Laya.stage.alignV = 'top'; // 适配垂直对齐方式
Laya.stage.alignH = 'middle'; // 适配水平对齐方式
Laya.stage.screenMode = this.Stage.SCREEN_HORIZONTAL; // 始终以横屏展示
Laya.stage.scaleMode = "fixedwidth"; // 宽度不变,高度根据屏幕比例缩放,还有 noscale、exactfit、showall、noborder、full、fixedheight 等适配模式
...

准备

betway体育app 5

此次我使用的游戏引擎是 LayaAir,你也可以根据你的爱好和实际需求选择合适的游戏引擎进行开发,为什么选择该引擎进行开发 ,总的来说有以下几个原因:

  • LayaAir 官方文档、API、示例学习详细、友好,可快速上手
  • 除了支持 2D 开发,同时还支持 3D 和 VR 开发,支持 AS、TS、JS 三种语言开发
  • 在开发者社区中提出的问题,官方能及时有效的回复
  • 提供 IDE 工具,内置功能有打包 APP、骨骼动画转换、图集打包、SWF转换、3D 转换等等

betway体育app 6

物理引擎方面采用了 Matter.js,篮球、篮网的碰撞弹跳都使用它来实现,当然,还有其他的物理引擎如 planck.js、p2.js 等等,具体没有太深入的了解,Matter.js 相比其他引擎的优势在于:

  • 轻量级,性能不逊色于其他物理引擎
  • 官方文档、Demo 例子非常丰富,配色有爱
  • API 简单易用,轻松实现弹跳、碰撞、重力、滚动等物理效果
  • Github Star 数处于其他物理引擎之上,更新频率更高

Mover脚本

  游戏中通过该脚本来控制陨石的坠落和子弹的射出,他们都是在Z轴方向上运动。通过设置speed可以控制其飞行的速度和前后方向。

1 public float speed;
2     // Use this for initialization
3     void Start () {
4         GetComponent<Rigidbody>().velocity = transform.forward * speed;
5     }

Description描述

The velocity vector of the rigidbody.

刚体的速度向量。

这里有各个轴的定义:

transform.forward:蓝色Z轴
transform.right:红色轴X轴
transform.up:黄色轴Y轴。

H5 游戏开发:推金币

2017/11/10 · HTML5 · 1 评论 · 游戏

原文出处: 凹凸实验室   

近期参与开发的一款「京东11.11推金币赢现金」(已下线)小游戏一经发布上线就在朋友圈引起大量传播。看到大家玩得不亦乐乎,同时也引发不少网友激烈讨论,有的说很带劲,有的大呼被套路被耍猴(无奈脸),这都与我的预期相去甚远。在相关业务数据呈呈上涨过程中,曾一度被微信「有关部门」盯上并要求做出调整,真是受宠若惊。接下来就跟大家分享下开发这款游戏的心路历程。

4. 针

为了模拟针的边缘轮廓,针的刚体由一个矩形与一个圆形所组成。下图红线描绘了针的刚体:

betway体育app 7

为什么针边缘没有像墙壁一样有一些提前量呢?这是因为进针效果要求针顶的平台区域尽量地窄。作为补偿,可以把环刚体的半径尽可能地调得更大,这样在视觉上环与针的重叠也就不那么明显了。

前言

本次是与腾讯手机充值合作推出的活动,用户通过氪金充值话费或者分享来获得更多的投篮机会,根据最终的进球数排名来发放奖品。

用户可以通过滑动拉出一条辅助线,根据辅助线长度和角度的不同将球投出,由于本次活动的开发周期短,在物理特性实现方面使用了物理引擎,所有本文的分享内容是如何结合物理引擎去实现一款投篮小游戏,如下图所示。

betway体育app 8

参考

Matter.js

LayaAir Demo

1 赞 收藏 评论

PlayerController脚本

  该脚本用来控制飞船的飞翔范围,倾斜角,射击速度等。

 1 using UnityEngine;
 2 using System.Collections;
 3 
 4 [System.Serializable]
 5 public class Boundary
 6 {
 7     public float xMin, xMax, zMin, zMax;
 8 }
 9 public class PlayerController : MonoBehaviour
10 {
11     public float speed;
12     public float tilt;
13     public Boundary boundary;
14 
15     private float nextFire;
16     public float fireRate;
17     public GameObject shot;
18     public Transform shotSqawn;
19     // Use this for initialization
20     void Start()
21     {
22 
23     }
24 
25     // Update is called once per frame
26     void Update()
27     {
28         if (Input.GetButton("Fire1")&&Time.time >nextFire)
29         {
30             nextFire = Time.time + fireRate;
31             Instantiate(shot, shotSqawn.position, shotSqawn.rotation);
32             GetComponent<AudioSource>().Play();
33         }
34     }
35 
36     void FixedUpdate()
37     {
38         float moveHorizontal = Input.GetAxis("Horizontal");
39         float moveVertical = Input.GetAxis("Vertical");
40 
41         Vector3 movement = new Vector3(moveHorizontal, 0.0f, moveVertical);
42         GetComponent<Rigidbody>().velocity = movement * speed;
43         GetComponent<Rigidbody>().rotation = Quaternion.Euler(0.0f, 0.0f, GetComponent<Rigidbody>().velocity.x * -tilt);
44 
45         GetComponent<Rigidbody>().position = new Vector3(
46             Mathf.Clamp(GetComponent<Rigidbody>().position.x,boundary.xMin,boundary.xMax),
47             0.0f,
48             Mathf.Clamp(GetComponent<Rigidbody>().position.z, boundary.zMin, boundary.zMax)
49             );
50     }
51 }

Serializable 序列化:

Inherits from Attribute

The Serializable attribute lets you embed a class with sub properties in the inspector.

Serializable(序列化)属性让你植入一个类用替代内容在Inspector(检视面板) 


Mathf.Clamp 限制

static function Clamp (value : float, min : float, max : float) : float

Description描述

Clamps a value between a minimum float and maximum float value.

限制value的值在min和max之间, 如果value小于min,返回min。 如果value大于max,返回max,否则返回value 


Time.deltaTime 增量时间

 

static var deltaTime : float

Description描述

The time in seconds it took to complete the last frame (Read Only).

以秒计算,完成最后一帧的时间(只读)。

Use this function to make your game frame rate independent.

使用这个函数使和你的游戏帧速率无关。

放在Update()函数中的代码是以帧来执行的.如果我们需要物体的移动以秒来执行.我们需要将物体移动的值乘以Time.deltaTime。


Quaternion.Euler 欧拉角

static function Euler (x : float, y : float, z : float) : Quaternion

Description描述

Returns a rotation that rotates z degrees around the z axis, x degrees around the x axis, and y degrees around the y axis (in that order).

返回一个旋转角度,绕z轴旋转z度,绕x轴旋转x度,绕y轴旋转y度(像这样的顺序)。


技术实现

因为是 2D 版本,所以不需要建各种模型和贴图,整个游戏场景通过 canvas 绘制,覆盖在背景图上,然后再做下机型适配问题,游戏主场景就处理得差不多了,其他跟 3D 思路差不多,核心元素包含障碍物、推板、金币、奖品和技能,接下来就分别介绍它们的实现思路。

进针判断

开始

原文出处: 凹凸实验室   

RandomRotator脚本

  游戏中的陨石在飞行的过程中我们希望让他翻滚掉了,这里我们为他添加了翻滚的脚本。其中tumble用来控制滚动速度。

1 public float tumble;//gun dong
2     // Use this for initialization
3     void Start () {
4         GetComponent<Rigidbody>().angularVelocity = Random.insideUnitSphere * tumble;
5     }

Rigidbody.angularVelocity

Description描述

The angular velocity vector of the rigidbody.

刚体的角速度向量。

这里有关生成随机数的常用方法:

Random

  • insideUnitCircle:返回单位半径为1圆中随机一点。
  • insideUnitSphere:返回单位半径为1球体中随机一点。
  • onUnitSphere:返回单位半径为1球体表面上随机一点。
  • Range:Min~Max
  • rotation:返回一个随机的角度(只读)。
  • seed:设置用于生成随机数的种子
  • value:返回[0.0~1.0] 之间的随机数(只读)

 

本文由必威发布于必威-前端,转载请注明出处:给大家在编写h5游戏上带来一些启发betway体育ap

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。