更新
This commit is contained in:
dengtongyu committed
1 parent
5cd551a08e
commit
40cde540d6
33 files changed
+547
-319
No files matched your search
@@ -1,15 +1,18 @@
|
||||
---
|
||||
title: egret 练手 《围住神经猫》
|
||||
tags: []
|
||||
id: '115'
|
||||
categories:
|
||||
- - 分享
|
||||
- 分享
|
||||
tags:
|
||||
- egret
|
||||
- 围住神经猫
|
||||
- 小游戏
|
||||
date: 2017-09-04 11:42:10
|
||||
---
|
||||
|
||||
Egret引擎是一个开源免费的游戏框架，用于构建二维游戏、演示程序和其他图形界面交互应用等。Egret使用TypeScript脚本语言开发。当游戏完成最终的打包后，可以将程序转换为HTML5游戏。实现跨平台特性。 Egret不仅仅是一个基于HTML5技术的游戏引擎，我们的产品线中除了Egret引擎还提供了很多辅助游戏开发的工具。准确的来说，Egret是一套游戏开发的解决方案。你可以使用Egret引擎来帮助你开发HTML5游戏，并运行在手机和PC端的浏览器中，同时也你可以使用Egret提供的相关工具搭建你自己的游戏开发工作流。 Egret的语法与ActionScript 3.0 一致，如果对as3.0熟悉的童鞋能很快上手。 果然有兴趣的童鞋可以直接去Egret的官网，有详细的文档资料 [白鹭引擎官网](https://www.egret.com/) 最近学习Egret，看了一些文档后，决定找个简单的项目自己练一下手，《围住神经猫》应该是个很好的选择。 先贴上完成的作品 [Demo](https://demo.dengtongyu.com/pages/nervcat/) **1.新建项目** 打开EgretWing --> 文件 --> 新建项目 --> Egret游戏项目 完成后打开 src 下的 Main.ts，改文件就是整个项目的入口文件，里面还有一些已经写好的方法，方便你后面调用。 具体请参考 [传送门](http://edn.egret.com/cn/article/index/id/579) 里面介绍得很详细 **2.加载进度条** 新建游戏项目后，默认的加载进度比较简陋，我们需要美化一下。 打开 src\\LoadingUI.ts 文件，这个就是加载进度条的类。
|
||||
Egret引擎是一个开源免费的游戏框架，用于构建二维游戏、演示程序和其他图形界面交互应用等。Egret使用TypeScript脚本语言开发。当游戏完成最终的打包后，可以将程序转换为HTML5游戏。实现跨平台特性。 Egret不仅仅是一个基于HTML5技术的游戏引擎，我们的产品线中除了Egret引擎还提供了很多辅助游戏开发的工具。准确的来说，Egret是一套游戏开发的解决方案。你可以使用Egret引擎来帮助你开发HTML5游戏，并运行在手机和PC端的浏览器中，同时也你可以使用Egret提供的相关工具搭建你自己的游戏开发工作流。 Egret的语法与ActionScript 3.0 一致，如果对as3.0熟悉的童鞋能很快上手。 果然有兴趣的童鞋可以直接去Egret的官网，有详细的文档资料 [白鹭引擎官网](https://www.egret.com/) 最近学习Egret，看了一些文档后，决定找个简单的项目自己练一下手，《围住神经猫》应该是个很好的选择。 先贴上完成的作品 [Demo](https://demo.dengtongyu.com/pages/nervcat/) **1. 新建项目** 打开EgretWing --> 文件 --> 新建项目 --> Egret游戏项目 完成后打开 src 下的 Main.ts，改文件就是整个项目的入口文件，里面还有一些已经写好的方法，方便你后面调用。 具体请参考 [传送门](http://edn.egret.com/cn/article/index/id/579) 里面介绍得很详细 **2. 加载进度条** 新建游戏项目后，默认的加载进度比较简陋，我们需要美化一下。 打开 src\\LoadingUI.ts 文件，这个就是加载进度条的类。
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
class LoadingUI extends egret.Sprite {
|
||||
|
||||
@@ -37,7 +40,7 @@ class LoadingUI extends egret.Sprite {
|
||||
|
||||
从代码可以看出，进度条仅仅是用文字展示了加载进度，我们来加个进度条UI美化一下。
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
class LoadingUI extends egret.Sprite {
|
||||
|
||||
@@ -81,9 +84,13 @@ class LoadingUI extends egret.Sprite {
|
||||
}
|
||||
```
|
||||
|
||||
效果如图：  **3.开始画面** 进度条弄好之后，我们开始做游戏开始的画面。如图：  可以看出，开始画面由背景、网格地图和开始按钮的图片组成，这个实现起来很简单。
|
||||
效果如图：
|
||||
|
||||
```
|
||||
 **3. 开始画面** 进度条弄好之后，我们开始做游戏开始的画面。如图： 
|
||||
|
||||
可以看出，开始画面由背景、网格地图和开始按钮的图片组成，这个实现起来很简单。
|
||||
|
||||
```
|
||||
|
||||
private mapGroup:eui.Group;//地图容器
|
||||
private circleArray:Array<object>;//圆圈网格的数组
|
||||
@@ -134,15 +141,13 @@ class LoadingUI extends egret.Sprite {
|
||||
this.btnStart.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
然后在createGameScene方法里面执行this.init()就可以了。
|
||||
|
||||
但是我们还要绘制围住神经猫的9X9的网格地图。
|
||||
我们在 src 下面创建一个自定义布局类，命名为 Map.ts
|
||||
```
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
module uilayout {
|
||||
|
||||
@@ -210,7 +215,7 @@ let childY:number = row * (layoutElement.height + gapY);
|
||||
|
||||
这样一个自定义布局类就写好了，如果对自定义布局不太了解的，可以去Egret的官网查看文档 [传送门](http://edn.egret.com/cn/article/index/id/525) 然后，我们在Main.ts入口文件里绘制9X9的圆圈网格。
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
/**创建网格**/
|
||||
private creatMap() {
|
||||
@@ -249,4 +254,8 @@ let childY:number = row * (layoutElement.height + gapY);
|
||||
}
|
||||
```
|
||||
|
||||
然后在init方法里面执行this.creatMap()就可以完成绘制了  后面的操作逻辑就不赘述了，有机会再跟大家分享。
|
||||
然后在init方法里面执行this.creatMap()就可以完成绘制了
|
||||
|
||||
|
||||
|
||||
后面的操作逻辑就不赘述了，有机会再跟大家分享。
|
||||
Reference in new issue
Block a user