学习印度谷歌开户资源渠道

Phaser是一个HTML5游戏框架。它使用了许多HTML5 API,例如Canvas,WebGL,Audio,Gamepad等,并添加了一些有用的逻辑,例如管理游戏循环并为我们提供了物理引擎。

使用Phaser,我们可以只用HTML,CSS和JavaScript来构建2D游戏。

项目需求
在使用Phaser构建Breakout克隆之前,让我们首先定义游戏的范围:

这款单人游戏具有30个积木,一个球拍和一个球的一个关卡
目标是让球摧毁所有积木,同时确保其不离开游戏画面的底部。
玩家将控制一个可左右移动的桨
该游戏是为桌面版网络用户打造的,因此将使用键盘进行输入

设置Phaser
Phaser是一个JavaScript库,要开发和玩我们的游戏,我们需要一些基本的HTML来加载JS。在一个工作区中创建一个名为breakout的目录。

在目录中创建以下文件和文件夹:

一个index.html文件
一个breakout.js文件
名为的文件夹 assets
在您的assets文件夹中,创建一个images文件夹
游戏资产是游戏使用的艺术品,声音,视频和其他数据。对于这个简单的Breakout克隆,没有多少资产需要使用文件夹进行组织。但是,优良作法是将资产与代码分开,并按类型将资产分开。

将以下代码添加到您的index.html文件中:

<!doctype html>

Breakout You need to enable JavaScript to run this app. 此基本HTML代码执行以下操作:

删除HTML和body标签中的浏览器边距和填充
添加一个gamediv元素,其中将包含我们的Breakout克隆
通过其CDN加载Phaser v3.17
加载breakout.js当前不执行任何操作但包含游戏逻辑的文件
为了使用Phaser有效开发游戏,我们需要将这些文件放到web服务器中运行。如果web服务器,出于安全原因,我们的浏览器将不允许我们的游戏脚本加载资产。

幸运的是,无需设置Apache或Nginx即可获得运行中的Web服务器。如果使用VisualStudio Code,则可以安装Live Server扩展。大多数IDE和文本编辑器都具有功能类似的插件。

如果您安装了Python版本3,则可以通过终端进入工作区并输入python3 -m http.server。还有其他CLI工具可提供简单的Web服务器,请选择一种可以为您提供最快时间开发游戏的工具。

最后,下载我们为此游戏创建的图像资产。将PNG文件复制并粘贴到images文件夹中。

创造我们的游戏世界
通过设置HTML和CSS,让我们编辑breakout.js文件以设置游戏世界。

开始Phaser
首先,我们需要配置Phaser并创建我们的Game实例。该游戏的实例是Phaser游戏的*控制器,它进行所有的设置和开始游戏循环。

让我们配置和创建Game实例:

// This object contains all the Phaser configurations to load our game
const config = {
type: Phaser.AUTO,
parent: ‘game’,
width: 800,
heigth: 640,
scale: {
mode: Phaser.Scale.RESIZE,
autoCenter: Phaser.Scale.CENTER_BOTH
},
scene: {
preload,
create,
update,
},
physics: {
default: ‘arcade’,
arcade: {
gravity: false
},
}
};

// Create the game instance
const game = new Phaser.Game(config);
该type属性告诉Phaser使用什么渲染器。Phaser可以使用HTML5的WebGL或Canvas元素来渲染我们的游戏。通过将类型设置为Phaser.AUTO,我们告诉Phaser首先尝试使用WebGL进行渲染,如果失败,则使用Canvas进行渲染。

该parent属性表示将要玩我们的游戏的HTML元素的ID。我们使用width和定义游戏尺寸(以像素为单位)height。该scale对象为我们做两件事:

mode 告诉Phaser如何使用父元素的空间,在这种情况下,我们确保游戏适合父元素的大小 div
autoCenter告诉Phaserdiv如果需要的话,如何在我们的父级中居中游戏。在这种情况下,我们将游戏在父div内垂直和水平居中。当游戏不占据父对象的整个空间时,此属性会更有用。
在Phaser中,我们的游戏逻辑在中定义Scenes。将场景视为游戏中的各种状态:标题屏幕是一个场景,游戏的每个级别将是它们自己的场景,剪切场景将是它自己的场景,等等。Phaser提供了Scene对象,但它也可以与含有常规的JavaScript对象preload(),create()和update()定义的函数。

最后一个配置告诉Phaser要使用哪个物理引擎。Phaser可以使用3种不同的物理引擎:Arcade,Impact和Matter。Arcade是最简单的入门游戏,足以满足我们的游戏需求。

Breakout 不需要重力即可工作,因此我们在物理引擎中禁用了该属性。如果我们要构建Platform游戏,则可能会启用重力,这样当我们的玩家跳跃时,他们会自然地掉回地面。

为了确保我们的游戏设置工作,我们需要添加preload(),create()和update()功能。创建游戏实例后,向其中添加以下空白函数:

function preload() { }

function create() { }

function update() { }

在Web服务器运行的情况下,导航到运行游戏的页面。您应该看到一个空白屏幕,如下所示:

游戏设定

加载资产
该游戏中的资产包括5张图片。在您可能创建的其他游戏中,您的资产可能非常庞大。高清晰图像,音频和视频文件可能会占用兆字节的空间。资产越大,负担越长。因此,Phaser具有一项preload()功能,我们可以在开始运行游戏之前加载所有资产。

将preload()函数更改为以下内容,以便我们可以在游戏循环开始之前加载图像:

function preload() {
this.load.image(‘ball’, ‘assets/images/ball_32_32.png’);
this.load.image(‘paddle’, ‘assets/images/paddle_128_32.png’);
this.load.image(‘brick1’, ‘assets/images/brick1_64_32.png’);
this.load.image(‘brick2’, ‘assets/images/brick2_64_32.png’);
this.load.image(‘brick3’, ‘assets/images/brick3_64_32.png’);
}

第一个参数是稍后将用来引用图像的键,第二个参数是图像的位置。

注: -当我们用this我们的preload(),create()和update()功能,我们指的是由之前创建的游戏实例game。

加载图像后,我们想在屏幕上放置精灵。在的顶部breakout.js,添加以下将包含我们的精灵数据的变量:

let player, ball, violetBricks, yellowBricks, redBricks, cursors;

一旦全局定义它们,我们所有的函数都可以使用它们。

添加精灵
sprite 是游戏场景中任何2D图像。在Phaser中,sprite 会封装图像以及其位置,速度,物理属性和其他属性。首先,通过create()函数创建player精灵:

player = this.physics.add.sprite(
400, // x position
600, // y position
‘paddle’, // key of image for the sprite
);

您现在应该可以在屏幕上看到一个桨:

屏幕播放器

该sprite()方法的第一个参数是X放置精灵的坐标。第二个参数是Y坐标,最后一个参数是preload()函数中添加的图像资产的键。

了解phaser和大多数2D游戏框架如何使用坐标很重要。我们在学校学到的图形通常将原点即点(0,0)置于中心。在Phaser中,原点位于屏幕的左上方。随着x增长,我们实际上正在向右移动。随着y增加,我们正在向下移动。

我们的游戏的宽度为800像素,高度为640像素,因此我们的游戏坐标如下所示:

游戏坐标

让我们将球添加到Player上方。将以下代码添加到该create()函数:

ball = this.physics.add.sprite(
400, // x position
565, // y position
‘ball’ // key of image for the sprite
);

由于球上面我们的Player,在坐标y的值是低比玩家的Y坐标。

添加精灵组
虽然Phaser可以轻松添加sprite,但如果必须分别定义每个sprite,将很快变得乏味。Breakout中的砖块几乎相同。位置不同,但是它们的属性(例如颜色以及它们与球的交互方式)是相同的。我们可以创建精灵组来更好地管理它们,而不是创建30个砖精灵对象。

让我们通过create()函数添加第一排紫色砖:

// Add violet bricks
violetBricks = this.physics.add.group({
key: ‘brick1’,
repeat: 9,
setXY: {
x: 80,
y: 140,
stepX: 70
}
});
代替this.physics.add.sprite()我们使用this.physics.add.group()并传递一个JavaScript对象。key属性引用sprite组中所有sprite将使用的图像键。该repeat属性告诉Phaser再创建多少个精灵。每个精灵组都创建一个精灵。随着repeat设置为9,Phaser将创建一个精灵组10个精灵。该setXY对象具有三个有趣的属性:

x 是第一个精灵的X坐标
y 是第二个精灵的Y坐标
stepX 是x轴上重复的精灵之间的像素长度。
也有一个stepY属性,但是我们不需要在游戏中使用它。让我们为砖添加另外两个剩余的精灵组:

上一篇:如何删除平铺纹理之间的间隙?


下一篇:pygame (五)