Egret社区
作者:知言不尽,一名在线的大三学生,具有浪漫主义色彩的理工男。
现已授权我们转发其创作的飞行射击游戏实战开发笔记,在这里也特别说明下,作者在学习、开发游戏过程中所用图片素材均源自网络。
正文如下:
背景简介
Egret实战开发,记录每天的学习进度,欢迎和我一起学习交流~
大家好,今天写下这篇文章记录学习Egret游戏开发,作者目前也是在学习白鹭引擎的初级阶段,又很多地方可能讲解还不够细致正确,我的仅供参考。此篇文章也有不足或者模糊的地方可以评论随意指出。
之后我会持续更新Egret引擎的学习教程,想要了解Egret引擎的盆友记得加关注呦。我会用很多图让大家直观的学习,避免走弯路,之后的代码和引擎库学习,希望朋友们看过我的讲解之后再多去磕一磕,自我吸收一下,互相学习。
实现效果一、背景从上向下移动
  1. class BG extends egret.Sprite{

  2.         public bg:egret.Bitmap[] = [];
  3.         public fg:egret.Bitmap;                //前景

  4.         public vy:number;        //背景移动的速度
  5.         public game:MainGame;        //上一级指针

  6.         public constructor(game:MainGame) {
  7.                 super();       
  8.                 this.game = game;
  9.                 for(let i = 0 ; i < 2; i ++){
  10.                         this.bg[i] = Main.createBitmapByName("bg11_jpg");
  11.                         this.addChild(this.bg[i]);
  12.                         //对图片的定位
  13.                         this.bg[i].y = 0 - i* this.bg[i].height;
  14.                 }
  15.                 this.vy = 10;        //背景移动速度
  16.         }

  17.         public update(){
  18.                 for(let i = 0 ; i < 2; i++){
  19.                         //图片向下移动
  20.                         this.bg[i].y+=this.vy;
  21.                         //当图片移动到屏幕下面就得放到上面
  22.                         if(this.bg[i].y > 800){
  23.                                 //有几张图片就挪到几张图片高度
  24.                                 this.bg[i].y -=2*this.bg[i].height;
  25.                         }
  26.                 }
  27.         }
  28. }
复制代码
飞行射击游戏是单屏游戏,类似跑酷 ,不可能让摄像机停下来。背景向下运动,才能让玩家感觉飞机在向前飞行。
背景实现: BG.ts
申请:
因为是2张图片。构造数组 public bg:egret.Bitmap[] = [];
前景1张 public fg:egret.Bitmap; //前景
public vy:number; //背景移动的速度
public game:MainGame; //上一级指针 链式对象管理
前景3个图片随机生成
  1. public resetFG(){
  2.         //随机0~2   0天梯,1,2
  3.         let id = Math.floor(Math.random()*3);
  4.         switch(id){
  5.                 case 0 :
  6.                         this.fg.texture = RES.getRes("bg12_png");
  7.                         if(Math.random()*100 < 50){//50%概论向左还是向右
  8.                                 this.fg.scaleX = -1;
  9.                                 this.fg.x = 480;
  10.                         }else{
  11.                                 this.fg.scaleX = 1;
  12.                                 this.fg.x = 0;
  13.                         }
  14.                 break;
  15.                 case 1:
  16.                         this.fg.texture = RES.getRes("bg13_png");
  17.                         this.fg.x = 480 - Math.random()*184;       
  18.                         this.fg.scaleX = 1;
  19.                         break;
  20.                 case 2 :
  21.                         this.fg.texture = RES.getRes("bg13_png");
  22.                         this.fg.x = Math.random() * 184;       
  23.                         this.fg.scaleX = -1;
  24.                         break;
  25.         }
  26.         this.fg.y = -500 - Math.random()*100;
  27. }
复制代码
用Id来随机前景图片,使用状态机来用id作为随机生成显示。下面做了一个细节,随机进行翻转,用scaleX来实现避免出现一样的情况。
resetFG()方法会执行很多次,所有重置方法不存在默认值。只要是重置方法,都需要对属性进行重新赋值。若不赋值,会保留上次的值。
二.角色控制
角色类
飞机有3张图片,因为是2D游戏,用小细节来实现3D效果,
申请:
轨迹跟随原理:
实际速度V,若手指移动很快为80像素, 但飞机最大速度为30. 实际走的为橙色三角形斜边。
先求C,
vy = v * a/c; vx = v * b/c;
public touchMove() 对当前值更新
移动当中,oxoy上一次点击不变,所以改变的是当前位置。ny跟着触笔,时刻获取最新位置。
touch三方法,ox oy nx ny 变化,玩家就可以移动,ox记录开始,nx记录玩家变化。
所以在update方法中,有轨迹跟随的核心代码。
求c边 a,b是横纵轴移动距离,c是实际移动距离。
根据速度的vxvy 再根据fi的值。向左飞只要比2大一直减。
用于显示拖动飞机偏转效果。
至此,就显示了文首的效果。


分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部