phaser小基础

本文介绍BlitterGameObject及其子对象Bob在游戏开发中的应用。Blitter专为提高渲染速度而设计,适用于大量帧的快速渲染,并且支持批量绘制方法。Bob作为Blitter的一部分,具有位置、透明度等属性,可通过纹理框架进行渲染。

Blitter

Blitter Game Object是一种特殊的容器,用于创建,更新和管理Bob对象。
Bobs专为渲染速度而非灵活性而设计。 它们由纹理,纹理框架,位置和alpha值组成。 您无法缩放或旋转它们。 他们在渲染过程中使用批量绘制方法来提高速度。

Blitter Game Object有一个绑定到它的纹理。 Blitter创建的Bobs可以使用此纹理中的任何帧进行渲染,但它们不能使用任何其他纹理。 正是这种单一纹理绑定允许它们的速度。

如果你需要在屏幕周围爆破大量的帧,那么Blitter对象非常值得研究。 它们特别适合用作您自己的特效系统的基础。


Bob

Bob属于Blitter Game Object。 Blitter负责管理和渲染此对象。

Bob有一个位置,alpha值和一个用于渲染的纹理框架。 您还可以切换Bob的翻转和可见状态。 Bob用于渲染的帧可以动态更改,但它必须是父Blitter使用的Texture中的帧。

Bob位置相对于Blitter父级。 因此,如果您移动Blitter父级,所有Bob孩子的位置也会受到此更改的影响。

您可以直接从游戏代码中操作Bob对象,但是应该通过Blitter父级来处理它们的创建和销毁。


用法

function preload ()
{
    this.load.image('atari', 'assets/sprites/atari130xe.png');
}

function create ()
{
    var blitter = this.add.blitter(0, 0, 'atari'); //将图片储存在blitter中 坐标 0,0
    var bob = blitter.create(100, 100); //展示出来 坐标 100,100
}

Group

create( [x] [, y] [, key] [, frame] [, visible] [, active])
创建一个new Game Object 并将其添加到该组
x:new Game Object 在世界上的x
y:new Game Object 在世界上的y
key:纹理的键值,来引用相关纹理图片
frame:需要展现的切割出的纹理编号
visible和active是状态值

diamonds32x24x5.png
在这里插入图片描述

图解
在这里插入图片描述

### 使用 Phaser 创建小游戏 #### 准备环境 为了使用 Phaser 开发游戏,首先需要设置开发环境。创建一个新的工作区并建立一个名为 `breakout` 的目录用于存放项目文件[^1]。 ```bash mkdir breakout && cd breakout ``` 接着,在此目录下编写基础的 HTML 文件以加载 Phaser 库: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Breakout Game</title> <!-- 加载 Phaser --> <script src="//cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script> </head> <body> <script type="module"> // 游戏配置和初始化代码将放置在这里 </script> </body> </html> ``` #### 初始化游戏场景 定义游戏的基本参数以及启动场景。这一步骤对于任何基于 Phaser 构建的小游戏都是至关重要的。 ```javascript const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create, update: update } }; function preload() {} function create() {} function update() {} let game = new Phaser.Game(config); ``` 上述代码片段展示了如何通过指定宽高、渲染模式(自动选择Canvas/WebGL)、预加载资源函数(`preload`)、创建对象逻辑(`create`) 和每帧更新行为 (`update`) 来构建一个简单的 Phaser 场景实例。 #### 添加图形元素 为了让游戏更加生动有趣,可以向场景中加入静态或动态的对象比如球体、挡板等。下面的例子说明了怎样在游戏中添加一个圆形物体作为玩家控制的角色——挡板。 ```javascript function create() { this.add.rectangle(400, 550, 100, 20, 0xff00ff); // 挡板位置(x,y), 宽度, 高度, 填充颜色(RGBA) } ``` 这段 JavaScript 语句会在屏幕底部中央绘制出一块紫色矩形代表挡板。 #### 动态交互设计 实现用户输入响应是使游戏具有互动性的关键部分之一。可以通过监听键盘事件来移动挡板的位置。 ```javascript var cursors; function create() { let paddle = this.add.rectangle(400, 550, 100, 20, 0xff00ff); cursors = this.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown){ paddle.x -= 5; }else if(cursors.right.isDown){ paddle.x += 5; } } ``` 这里实现了当按下方向键左箭头时让挡板往左边平移;而按右箭头则相反地朝右边位移。 以上就是利用 Phaser 制作一个小规模打砖块类游戏的核心步骤概述。当然实际应用过程中还需要考虑更多细节如碰撞检测等功能模块的设计与集成。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值