unity 自动构建

tech2023-02-16  101

unity 自动构建

Thanks to Michaela Lehr for kindly helping to peer review this article.

感谢Michaela Lehr慷慨地帮助同行审阅本文。

In this tutorial, I’ll demonstrate how to create a simple 2D tapping game in Unity. The idea is similar to the famous games of Tapping Bugs: you tap on a moving insect, it disappears, and another one comes in.

在本教程中,我将演示如何在Unity中创建简单的2D点击游戏。 这个想法类似于著名的“窃听虫子”游戏:点击移动的昆虫,它消失了,又有一个昆虫进来。

I won’t give too much attention to the design, because I’d like to show how it works using some simple code. This game can be converted in an Android, iOS or WebGL game.

我不会过多地关注设计,因为我想用一些简单的代码展示它的工作原理。 该游戏可以在Android,iOS或WebGL游戏中转换。

First, make sure you have the latest version of Unity. I’m using version 5.3.

首先,请确保您具有最新版本的Unity。 我正在使用5.3版。

Here is the Assets folder for this Tapit project, or you can view/download the entire project files here.

这是此Tapit项目的Assets文件夹,或者您可以在此处查看/下载整个项目文件。

创建游戏场景,画布和GUI元素 (Creating Game Scene, Canvas and GUI Elements)

Create a new 2D project and name it as you wish. Once the new project is ready, inside the Assets folder create a new folder called Images. Open this folder, right-click, choose Import new Asset and import the background.jpg image. Drag this image inside the Scene window and stretch it depending on the screen size you’re using. I’m using a portrait screen similar to mobile screens, 800 x 1280px.

创建一个新的2D项目并根据需要命名。 新项目准备就绪后,在Assets文件夹内创建一个名为Images的新文件夹。 打开此文件夹,单击鼠标右键,选择“ 导入新资产”并导入background.jpg图像。 将此图像拖到“ Scene窗口中,然后根据您使用的屏幕尺寸进行拉伸。 我正在使用类似于移动屏幕的纵向屏幕,分辨率为800 x 1280像素。

Now import the ant_1.png image the same way. I scaled width and height by a factor of 2 to make it more visible and easier to tap. Click on Ant in the Hierarchy view and add a Circle Collider 2D.

现在以相同的方式导入ant_1.png图像。 我将宽度和高度缩放了2倍,使其更明显且更易于点击。 在“ 层次结构”视图中单击“ 蚂蚁” ,然后添加一个Circle Collider 2D 。

Right-click on an empty space inside the Hierarchy view and go UI > Canvas.

右键单击“ 层次结构”视图内的空白区域,然后进入“ UI”>“ Canvas” 。

In the Canvas menu, select Render Mode to be Screen Space – Camera. Render Camera should be your default camera, Main Camera. Plane Distance should be any value between the distance of the background and Main Camera. Most of the times this is a number between 0 and 10. I set it to 3.

在“ 画布”菜单中,选择“ 渲染模式”作为“ 屏幕空间–相机” 。 “渲染相机”应为默认相机“ 主相机” 。 平面距离应为背景与主相机之间的距离的任何值。 在大多数情况下,这是0到10之间的数字。 我将其设置为3 。

In the Canvas Scaler (Script) menu, set the UI Scale Mode to Scale With Screen Size and Screen Match Mode to Expand.

在“ 画布 缩放 器(脚本)”菜单中,将“ UI缩放模式”设置为“ 使用屏幕尺寸缩放” ,将“ 屏幕匹配模式”设置为“ 展开” 。

Now right-click on the Canvas in Hierarchy view and choose UI > Text. Let this new game object be called Score. Set a readable font size and place it at any corner you want.

现在,右键单击“ 层次结构中的画布”视图,然后选择“ UI”>“文本” 。 让这个新的游戏对象称为Score 。 设置可读的字体大小并将其放置在所需的任何角落。

Create another Text game object and call it Lives. This text will show us the number of our remaining lives. Make this object similar to the Score object and place in another corner.

创建另一个Text游戏对象并将其命名为Lives 。 该文本将向我们显示我们剩余的生命数量。 使该对象与“得分”对象相似,然后放置在另一个角落。

All the GUI now is done.

现在所有的GUI已经完成。

剧本 (Scripts)

The latest versions of Unity support only two scripting languages: UnityScript (which is similar to JavaScript) and C#. This project will be written in UnityScript.

最新版本的Unity仅支持两种脚本语言:UnityScript(类似于JavaScript)和C#。 该项目将使用UnityScript编写。

Inside the Assets folder, create a new one called Scripts. This will contain all the necessary functions to make game run. In the first part, we’ll create the variables, giving them a name and type.

在Assets文件夹中,创建一个名为Scripts的新Scripts 。 这将包含使游戏运行所需的所有必要功能。 在第一部分中,我们将创建变量,并为其指定名称和类型。

Inside the Scripts folder, create a new JavaScript file and call it AntScript.js. It will start with these variables:

在Scripts文件夹中,创建一个新JavaScript文件,并将其AntScript.js 。 将从这些变量开始:

var ant : GameObject; var scoreNumber : int; var livesNumber : int; var scoreText : GameObject; var livesText : GameObject; var walkingSpeed : double;

So the only player in our game will be called ant and it will be a GameObject. Indeed, it’s a 2D Sprite that will move and change behavior according to the code we’ll look at shortly.

因此,我们游戏中唯一的玩家将称为ant ,它将是GameObject 。 实际上,这是一个2D Sprite,它将根据我们稍后将要看到的代码移动和更改行为。

In this case, we will use two integer variables called scoreNumber (for saving the player’s scores) and livesNumber (for storing the player’s remaining lives).

在这种情况下,我们将使用两个整数变量,分别称为scoreNumber (用于保存玩家的得分)和livesNumber (用于存储玩家的剩余寿命)。

The scoreText and livesText GameObjects will display information about the scores and the remaining lives to play.

scoreText和livesText游戏对象将显示有关分数和剩余寿命的信息。

To move the player on the 2D Space, its coordinates have to change, depending on which axis it will move along. Since the 2D space is a little bit small, we’re going to use small numbers along the axis.

要在2D空间上移动播放器,必须更改其坐标,具体取决于其沿哪个轴移动。 由于2D空间略小,我们将沿轴使用较小的数字。

Its speed will be determined by a variable called walkingSpeed. This variable will be incremented by small numbers, like 0.01. So its type will be double.

它的速度将由一个名为walkingSpeed的变量确定。 此变量将增加一个小数字,例如0.01 。 因此其类型将为double 。

函数Start() (Function Start())

Everyone who has some knowledge about UnityScript knows that it has two important functions: function Start() and function Update(). The first one is called only once during all the scene play, and the second is called on each game frame (if MonoBehaviour is enabled). Here’s what function Start() contains:

熟悉UnityScript的每个人都知道它具有两个重要功能: function Start()和function Update() 。 在所有场景播放期间,第一个仅被调用一次,第二个在每个游戏帧上被调用(如果启用了MonoBehaviour)。 这是function Start()包含的内容:

function Start () { ant = GameObject.Find("Ant"); scoreText = GameObject.Find("Score"); livesText = GameObject.Find("Lives"); //Initialize the values of walking speed walkingSpeed = 0.0; livesNumber = 3; scoreNumber = 0; //Initialize the GUI components livesText.GetComponent(UI.Text).text = "Lives Remaining: " + livesNumber; scoreText.GetComponent(UI.Text).text = "Score: " + scoreNumber; //Place the ant in a random position on start of the game ant.transform.position.x = generateX(); ant.transform.position.y = generateY(); }

In the first block of code, the variables are now initialized. Unity Scripting has a very good method for referencing the GameObjects: you just have to write GameObject.Find("[Name_of_gameobject]");.

在第一段代码中,变量现已初始化。 团结脚本对引用的一个很好的方法GameObjects :你只需要编写GameObject.Find("[Name_of_gameobject]"); 。

The initial walkingSpeed will be 0.0, livesNumber will be 3, and scoreNumber will normally be 0.

初始walkingSpeed将为0.0 , livesNumber将为3 ,而scoreNumber通常将为0 。

The second block sets text to the UI elements we initialized before.

第二个块将文本设置为我们之前初始化的UI元素。

In the third block we are accessing the x and y coordinates of the ant object. generateX() and generateY() are two functions that return random numbers.

在第三个块中,我们访问ant对象的x和y坐标。 generateX()和generateY()是两个返回随机数的函数。

generateX()和generateY()函数 (generateX() and generateY() Functions)

Their code is this:

他们的代码是这样的:

//Generates random x function generateX(){ var x = Random.Range(-2.54,2.54); return x; } //Generates random y function generateY(){ var y = Random.Range(-4.0,3.8); return y; }

These two functions have similar code, except what’s contained in the Range(). In each, we’re putting the left and right limit.

除了Range()包含的内容外,这两个函数具有相似的代码。 在每种情况下,我们都设置了左右限制。

Depending on your screen size, choose left and right limit as the extreme horizontal positions of the ant in order to be inside of the screen.

根据您的屏幕尺寸,选择左和右极限作为蚂蚁的极端水平位置,以使其位于屏幕内部。

The value it returns depends on the parameter types you put inside the brackets. In this case, we’re putting doubles so it returns a double value. At the same time, these values represent the visible 2D playground of our game.

它返回的值取决于放在方括号内的参数类型。 在这种情况下,我们放入double因此它返回一个double值。 同时,这些值代表了我们游戏的可见2D运动场。

函数Update() (Function Update())

This function does the most important job during the game run.

此功能在游戏运行期间执行最重要的工作。

function Update () { if(ant.transform.position.y < -4.35 && livesNumber > 0){ livesNumber -= 1; livesText.GetComponent(UI.Text).text = "Lives Remaining: " + livesNumber; generateCoordinates(); } else if(ant.transform.position.y < -4.35 && livesNumber == 0){ Destroy(GameObject.Find("Ant")); gameOver(); } else{ ant.transform.position.y -= walkingSpeed; } } function Update () { if(ant.transform.position.y < -4.35 && livesNumber > 0) { livesNumber -= 1; livesText.GetComponent(UI.Text).text = "Lives Remaining: " + livesNumber; generateCoordinates(); } else if(ant.transform.position.y < -4.35 && livesNumber == 0) { Destroy(GameObject.Find("Ant")); gameOver(); } else { ant.transform.position.y -= walkingSpeed; } }

From this function, we can get information about our game objects on each game frame. Since the ant will be moving most of the time, we should set the player miss condition. In this case, the player misses when the ant goes to the bottom of the screen, or when its y position is smaller than -4.35. If the player misses and the number of lives is more than 0, it has other chances to play, so the number of lives decreases by 1 and the screen text shows the decreased number of lives. Then, generateCoordinaes() is called.

通过此功能,我们可以获得有关每个游戏框架上游戏对象的信息。 由于蚂蚁在大多数时间都会移动,因此我们应该设置玩家未命中的条件。 在这种情况下,当蚂蚁进入屏幕底部时,或者当其y位置小于-4.35时,玩家会错过。 如果玩家未命中,并且生命数大于0 ,则它还有其他机会玩,因此生命数减少1 ,并且屏幕文本显示减少的生命数。 然后,调用generateCoordinaes() 。

If the ant goes to the bottom while the number of lives is 0, this object is destroyed and the gameOver() function is called. This function loads the GameOver scene.

如果在生命数为0时蚂蚁移到最底端,则此对象将被销毁并gameOver()函数。 此功能加载GameOver场景。

And if the ant isn’t at the bottom of the screen, it goes down along the Y axis with a speed of walkingSpeed/frame.

而且,如果蚂蚁不在屏幕底部,则它会沿Y轴以walkingSpeed /帧的速度下降。

函数OnMouseDown() (Function OnMouseDown())

This function is an internal function of the engine. It’s called each time its parent game object is clicked with mouse button or tapped on a touch device:

此功能是引擎的内部功能。 每次使用鼠标按钮单击其父游戏对象或在触摸设备上点击它时都会调用它:

function OnMouseDown(){ //Place the ant at another point generateCoordinates(); //Increase the walking speed by 0.01 walkingSpeed += 0.01; }

Here it means that the player has tapped the ant and he/she just won a +1 score. The score text gets updated and two new coordinates are randomly generated. The ant shows up at the new coordinates and it goes down with an increased walkingSpeed.

在这里,这意味着玩家已经轻拍了蚂蚁,而他/她刚刚赢得了+1分。 乐谱文本得到更新,并且随机生成两个新坐标。 蚂蚁出现在新坐标处,并随着walkingSpeed速度的增加而walkingSpeed 。

The whole AntScript.js code can be seen on GitHub.

整个AntScript.js代码可以在GitHub上看到。

Drag this script and drop on the Ant game object shown in Hierarchy view.

将此脚本拖放到“ 层次结构”视图中显示的Ant游戏对象上。

Inside the Scripts folder create a new script called Functions.js. The code is:

在Scripts文件夹中,创建一个名为Functions.js的新脚本。 代码是:

function loadGame(){ Application.LoadLevel("Game"); } function loadMenu(){ Application.LoadLevel("Menu"); } function quit(){ Application.Quit(); }

Now the game scene is almost done. Save this scene by clicking File* > Save Scene and call it Game.

现在,游戏场景即将完成。 通过单击文件*>保存场景并将其命名为游戏来保存该场景。

游戏结束现场 (Game Over Scene)

Go to File > New Scene. Create a new Canvas the same way we did in the last scene. Create a new Panel inside and give it the color you want.

转到“ 文件”>“新场景” 。 以与上一个场景相同的方式创建一个新的Canvas。 在内部创建一个新的面板,并为其指定所需的颜色。

Inside the Panel, place a new Text element that will show that game is over.

在面板内部,放置一个新的Text元素,该元素将显示游戏结束。

Create a new Button and call it Restart. Place it below the Game Over text and choose its Source Image to be the reload.png from the Assets folder.

创建一个新的Button并将其称为Restart 。 将其放在“ 游戏结束”文本下方, reload.png从“ Assets文件夹中选择其源图像作为reload.png 。

Click Add Component and choose Scripts > Functions. Make sure to call Functions.loadGame on clicking this button.

单击添加组件,然后选择脚本>函数 。 确保在单击此按钮时调用Functions.loadGame 。

You can also add another button to load the Menu scene.

您还可以添加另一个按钮来加载菜单场景。

Under this button, create a new Button and call it Quit. Call Functions.quit when this is clicked.

在此按钮下,创建一个新按钮,并将其命名为Quit 。 单击此Functions.quit ,请调用Functions.quit 。

We are done with this scene, so save it and set its name GameOver.

我们已经完成了这个场景,因此保存它并设置其名称GameOver 。

Lastly, we need to create a new Scene and call it Menu. This will be the first scene the user will see once the app is loaded.

最后,我们需要创建一个新的场景并将其命名为Menu 。 这是加载应用后用户将看到的第一个场景。

Add a new Canvas the same way as above and add two Buttons inside it. The first should be called New Game and the second Quit.

以与上述相同的方式添加新的Canvas,并在其中添加两个Button。 第一个应该称为“ 新游戏” ,第二个应该称为“ 退出” 。

Call the functions from the Functions.js script on each button as below.

如下所示,从每个按钮上的Functions.js脚本中调用函数。

The New Game button:

新游戏按钮:

The Quit button:

退出按钮:

The Menu:

菜单:

结论 (Conclusion)

This tutorial has demonstrated elements that can be used for a range of other games. As I said at the beginning, the focus hasn’t been on design, but you can easily replace the assets with others of your own design. You can also get as creative as you like with the menu scenes.

本教程演示了可用于其他一系列游戏的元素。 正如我在开始时说的,重点并没有放在设计上,但是您可以轻松地用自己设计的其他资产替换资产。 您还可以通过菜单场景获得尽可能多的创意。

Now the game is done. Have a try at building it yourself, and don’t hesitate to comment below if you have any difficulties or questions.

现在游戏结束了。 尝试自己构建它,如果您有任何困难或疑问,请在下面评论。

And once again, you can download the full codebase on GitHub.

再一次,您可以在GitHub上下载完整的代码库。

翻译自: https://www.sitepoint.com/how-to-build-a-2d-tapping-game-in-unity/

unity 自动构建

最新回复(0)