标签：Phaser 游戏 谷歌 精灵 渠道 添加 开户 我们 sprite
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>
删除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属性，但是我们不需要在游戏中使用它。让我们为砖添加另外两个剩余的精灵组：
标签：Phaser,游戏,谷歌,精灵,渠道,添加,开户,我们,sprite 来源： https://blog.csdn.net/weixin_54074717/article/details/111873193
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。