• 【h5-egret】如何快速开发一个小游戏


    1.环境搭建

    安装教程传送门:http://edn.egret.com/cn/index.php?g=&m=article&a=index&id=207&terms1_id=20&terms2_id=22

     

    安装包下载:http://www.egret.com/egretengine

    一键安装完成。

    打开cmd验证是否完成:输入命令:egret,如安装正确的则如下图所示。

    如果显示未配置环境变量,找到修复安装。点击修复安装后Egret 会帮你修复被破坏的环境变量和命令行程序。

    MAC:

    大体的流程与win下无大差别。

    2.创建项目

    WIN(Mac类似):

    不懂得请戳: http://edn.egret.com/cn/index.php?g=&m=article&a=index&id=211&terms1_id=20&terms2_id=23

    1.创建一个我们需要使用的项目的文件夹,比如我在F盘创建一个code文件夹。

    2.使用cmd进入到code文件夹目录下,如图所示:

    3.命令 egret create 项目名,创建项目。

    在生成的项目文件夹中我们会看到四个子文件夹。

    3.开发

    1.先跑起来。

    1.开发工具:WebStorm

    2.编译运行:使用webstorm导入刚才创建的项目,点击左下角的Terminal,集成的cmd就可以再webstorm内使用了。

    输入:egret build 项目名,就可以编译了。编译完成后,输入:egret startserver 项目名,运行项目。

    如果您的目录处于当前项目目录下,可以直接使用egret build命令进行编译,使用run来运行。

    然后会自动弹出网页。默认的例子如图,成功运行。

    2.项目开始之前的准备

    1.打开Main.ts文件,将createGameScene中的内容全部删除,并将createGameScene方法后边的所有方法删除。

    2.导入自己要使用的资源,放入resourceassets下,然后在resource.json下,参照之前的模式配置一下即可。

    3.开始自己的项目开发

    现在,我们来做一个超级玛丽撞金币的小游戏。例子传送门:http://iamedison.sinaapp.com/

    1.加载图片到场景

    官方自带的例子帮忙封装好了一个方法createBitmapByName(name:string)来创建bitmap对象,直接使用会方便省事。

    参数是resource.json下配置好的图片名称,直接传入即可。

    创建背景来作为例子:

    var bg: egret.Bitmap =this.createBitmapByName("bgImage");
    
    this.addChild(sky);

    然后我们可以设置他的宽度和高度以及x,y值来调整需要的效果:

    this.stage.stageWidth 是屏幕可看见的宽度
    var stageW: number = this.stage.stageWidth;
    var stageH: number = this.stage.stageHeight;
    sky.width = stageW;
    sky.height = stageH;
    sky.x = 0;
    sky.y = 0;
    
    
    然后把背景给弄起来,看图:



    现在可以其他静态显示的图都创建出来,如图所示:



    这样,我们的整个游戏界面就出来了。

    2.开启主角mario的点击事件

    设置对象可以点击:mario.touchEnabled=true;

    注册点击事件: 

    mario.addEventListener( egret.TouchEvent.TOUCH_TAP, this.startAnimation, this );
    参数分别是:事件类型,回调函数,还有回调的对象。事件的类型如图所示:



    然后我们要让主角跳跃起来,我这边做一个模拟跳跃的效果,设置y轴来让他跳跃起来。然后我们要用到一个叫做缓动动画的东西:

    
    
    egret.Tween.removeTweens(this._mario);
    var tw = egret.Tween.get(this._mario,{loop:false});
    
    
    缓动的效果也很多:




    var easeObj = egret.Ease.sineOut;
    tw.to({x:stageW / 2 - 20,y:stageH / 2 - 90},20,easeObj).wait(20)
    .to({x:stageW / 2 - 20,y:stageH / 2 - 70},20,easeObj).wait(20);
    
    
    上面代码做的就是y轴上移然后再下移(这边的原点是在左上角的),跳跃的效果就出来了。
    然后我们可以用类似的原理来处理撞击石头出金币的效果,加上一个石头移动的缓动动画,再加上一个金币出现的缓动动画。
    金币移动到点之后触发回调函数,移除金币:tw2.call(this.complete, this,[coin]);
    private complete(coin:egret.Bitmap)
    {
        this.removeChild(coin);
        coin = null;
    }
    来个效果图:





    3.计时和分数
    
    
    开启一个定时器(单位毫秒):

     

    var timer:egret.Timer = new egret.Timer(1000,10);timer.addEventListener(egret.TimerEvent.TIMER,this.timerFunc,this);timer.start();
    
    
    创建文本:
    var colorLabel: egret.TextField = new egret.TextField();
    colorLabel.textColor = 0xffffff;
    colorLabel.textAlign = "center";
    colorLabel.text = "0";
    colorLabel.size = 20;
    this.addChild(colorLabel);
    
    
    然后统计10秒内,点击多少次。效果如图所示:




    4.编译发布

    编译:在Terminal里面先编译一次,egret build,修改改都需要编译一次,因为他需要把ts转换成js。

    发布:命令egret publish,然后就会自动编译了,在对应文件夹就可以找到发布版,如图所示:

    将launcher、resource、index.html拷贝到服务器上就OK了。

    一个简单的小游戏就这么完成了。

    MT.Team

  • 相关阅读:
    接收HttpPost请求路由可以不用带去掉参数
    吟唱一首
    C# XML反序列化解析成对象集合
    两个对象中相同属性赋值
    CefSharp 笔记-1
    C# 笔记--Label设置背景图片
    C# 笔记--VS 2017包下载超时,连接失败
    SQLite——C#查询表时 该字符串未被识别为有效的 DateTime 错误
    C# 笔记--Sendkeys
    C# 笔记——MeasureString准确测量
  • 原文地址:https://www.cnblogs.com/mtTeam/p/4881532.html
Copyright © 2020-2023  润新知