开始游戏开发阶段
Phaser是一个创建2D视频游戏的框架。它使用html5canvas来显示游戏，JavaScript来运行游戏。使用Phaser而不是vanilla JavaScript的好处是，它有一个广泛的库，可以完成视频游戏的大部分物理特性，使您能够集中精力设计游戏本身。
Phaser缩短了开发时间，简化了工作流程。让我们学习如何用Phaser创建一个基本游戏。
为什么要用phaser开发？
Phaser与其他可视化编程语言类似，因为程序基于循环更新。Phaser有三个主要阶段：预加载、创建和更新。
在preload中，游戏的资产被上传并提供给游戏。
创建初始化游戏和所有开始游戏元素。每一个功能在游戏开始时运行一次。
另一方面，更新在整个游戏中循环运行。它是更新游戏元素以使其具有交互性的主力军。
使用phaser设置开发游戏的系统
尽管Phaser在HTML和JavaScript上运行，但游戏实际上是在服务器端运行的，而不是客户端。这意味着您需要在本地主机上运行游戏。运行游戏服务器端允许您的游戏访问程序外的其他文件和资产。如果您还没有设置本地主机，我建议您使用XAMPP来设置本地主机。
下面的代码将帮助您启动并运行。它建立了一个基本的游戏环境。
<html> <head> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> </head> <body> <script> var config = { type: Phaser.AUTO, backgroundColor: 0xCCFFFF, width: 600, height: 600, physics: { default: 'arcade' }, scene: { preload: preload, create: create } }; var gamePiece; var game = new Phaser.Game(config); function preload(){ this.load.image('gamePiece', 'img/gamePiece.png'); } function create(){ gamePiece = this.physics.add.sprite(270, 450, 'gamePiece'); } </script> </body></html>要运行游戏，需要将名为“gamePiece”的PNG图像保存到本地主机上的“img”文件夹中。为简单起见，本例使用60xgame de60px橙色正方形。你的游戏应该是这样的：
如果遇到问题，请使用浏览器的调试器找出问题所在。即使缺少一个字符也会造成严重的破坏，但通常情况下，调试器会捕获这些小错误。
解释设置代码
到目前为止，游戏什么都没做。但我们已经覆盖了很多领域！让我们更深入地看看代码。
要运行Phaser游戏，需要导入Phaser库。我们在3号线上做这个。在本例中，我们链接到源代码，但您可以将其下载到本地主机并引用该文件。
到目前为止，大部分代码都配置了游戏环境，变量config存储了这些环境。在我们的示例中，我们正在设置一个背景为600px×600px的蓝色（十六进制色码中的CCFFFF）的移相器游戏。目前，游戏物理设置为arcade，但Phaser提供了不同的物理。
最后，scene告诉程序在游戏开始前运行preload函数和create函数来启动游戏。所有这些信息都会传递给名为game的游戏对象。
相关：6款最适合编程和编码的笔记本电脑
代码的下一部分是游戏真正形成的地方。预加载功能是你想要初始化任何你需要运行游戏的东西。在我们的例子中，我们已经预装了游戏的图片。image的第一个参数命名我们的图像，第二个参数告诉程序在哪里找到图像。
在create函数中，gamePiece图像被添加到游戏中。第29行说，我们正在添加的图像游戏件作为一个精灵270px左和450px从左上角下来，我们的游戏区。
让我们的棋子动起来
到目前为止，这还不能称为游戏。首先，我们不能移动我们的棋子。为了能够改变我们游戏中的东西，我们将不得不添加一个更新功能。我们还必须调整config变量中的场景，以告诉游戏更新游戏时要运行哪个函数。
添加更新函数
配置中的新场景：
scene: { preload: preload, create: create, update: update}接下来，在create函数下面添加一个update函数：
function update(){}获取关键输入
为了让玩家用箭头键控制游戏，我们必须添加一个变量来跟踪玩家按下的键。在下面声明gamePieces的地方声明一个名为keyInputs的变量。在那里声明它将允许所有函数访问新变量。
var gamePiece;var keyInputs;在create函数中创建游戏时，应该初始化keyInput变量。
function create(){ gamePiece = this.physics.add.sprite(270, 450, 'gamePiece'); keyInputs = this.input.keyboard.createCursorKeys();}现在在更新功能中，我们可以检查玩家是否正在按箭头键，如果是，则相应地移动游戏块。在下面的例子中，游戏块被移动了2倍，但是你可以使这个数字变大或变小。一次移动1px似乎有点慢。
function update(){ if(keyInputs.left.isDown){ gamePiece.x = gamePiece.x - 2; } if(keyInputs.right.isDown){ gamePiece.x = gamePiece.x + 2; } if(keyInputs.up.isDown){ gamePiece.y = gamePiece.y - 2; } if(keyInputs.down.isDown){ gamePiece.y = gamePiece.y + 2; }}游戏现在有了一个可移动的角色！但要真正成为一场比赛，我们需要一个目标。让我们添加一些障碍。躲避障碍是8位时代很多游戏的基础。
为游戏添加障碍
这个代码示例使用了两个障碍精灵，分别称为obstacle1和obstacle2。obstacle1是蓝色的正方形，obstacle2是绿色的。每个图像都需要像游戏精灵一样预加载。
function preload(){ this.load.image('gamePiece', 'img/gamePiece.png'); this.load.image('obstacle1', 'img/obstacle1.png'); this.load.image('obstacle2', 'img/obstacle2.png');}然后每个障碍精灵都需要在create函数中初始化，就像游戏一样。
function create(){ gamePiece = this.physics.add.sprite(270, 450, 'gamePiece'); keyInputs = this.input.keyboard.createCursorKeys(); obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1'); obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');}使障碍物移动
这次要移动棋子，我们不想使用玩家输入。相反，让我们让一个从上到下移动，另一个从左到右移动。为此，请向update函数添加以下代码：
obstacle1.y = obstacle1.y + 4;if(obstacle1.y > 600){ obstacle1.y = 0; obstacle1.x = Phaser.Math.Between(0, 600);} obstacle2.x = obstacle2.x + 4;if(obstacle2.x > 600){ obstacle2.x = 0; obstacle2.y = Phaser.Math.Between(0, 600);}上面的代码将把障碍物1移到屏幕下方，障碍物2移到游戏区域，每帧4px。一旦一个正方形离开屏幕，它就会在一个新的随机点被移回对面。这将确保玩家总是有一个新的障碍。
检测碰撞
但我们还没有完成。你可能已经注意到我们的球员可以通过障碍。我们需要让游戏检测玩家何时碰到障碍物并结束游戏。
Phaser物理库有一个对撞机探测器。我们只需要在create函数中初始化它。
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){ gamePiece.destroy(); obstacle.destroy(); obstacle2.destroy();});this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){ gamePiece.destroy(); obstacle.destroy(); obstacle2.destroy();});对撞机方法需要三个参数。前两个参数标识哪些对象正在碰撞。上面，我们有两个对撞机。第一个碰撞器检测游戏件何时与障碍物1发生碰撞，第二个碰撞器查找游戏件与障碍物2之间的碰撞。
第三个参数告诉碰撞器在检测到碰撞后要做什么。在这个例子中，有一个函数。如果发生碰撞，所有游戏元素都会被破坏；这会停止游戏。现在，如果玩家碰到障碍物，他们将结束游戏。
尝试使用phaser进行游戏开发
有许多不同的方法可以改进这个游戏，使之更加复杂。我们只创建了一个玩家，但是可以添加第二个可玩的角色，并使用“awsd”控件进行控制。同样，你可以尝试添加更多的障碍物并改变它们的移动速度。
这个介绍会让你开始学习，但还有很多东西要学。Phaser最棒的一点是很多游戏物理都是为你做的。这是开始设计2D游戏的一个非常简单的方法。继续构建此代码并优化您的游戏。
如果遇到任何错误，浏览器调试器是发现问题的好方法。
- 发表于 2021-03-30 00:58
- 阅读 ( 233 )
- 分类：编程
你可能感兴趣的文章
模拟人生游戏有什么不同？
...往往属于社区与住宅物业的一般类别。您还可以选择从头开始创建全新的社区。 ...
想成为一个游戏开发者吗？这个包教你
... 每个游戏开发者都必须从某个地方开始。对很多人来说，最棘手的事情是知道在哪里。我应该使用哪个游戏引擎？我应该学习编程语言吗？如果是的话，哪种编程语言最适合游戏开发？ ...
怪物猎人崛起是为开关，它来的电脑，太
...：便携性和本地多人游戏。 不过，自从Capcom开始**《怪物猎人世界》以来，这一切换已成为全球热门，从纸面上看，它应该是该系列的完美系统。它比PSP和3DS硬件功能强大得多，PSP和3DS硬件使怪物猎人在日本成为一种...
亚马逊宣布推出名为luna的新云游戏服务
...云游戏平台。这一消息并不令人惊讶：这项服务从去年就开始传闻，之前的代号是“Tempo”，而一款亚马逊**的游戏控制器就在今天的活动前泄露出去。 目前还不清楚Luna何时会广泛上市，但它将首先在PC、Mac、Fire TV、...
crash bandicoot正在获得一款由candy crush传奇创作者开发的新手机游戏
...你通过熟悉的阶段和战斗敌人从过去的分期进展。 这款游戏将是一款跑步者游戏，类似于庙宇跑步，玩家可以在屏幕上向左或向右滑动，移动角色来收集硬币或避开无底坑。但它不仅仅是一个庙宇运行的克隆人；预告片显示，...
“皮肤伸展”控制器为游戏添加了新的反馈
...振动和声音）一起工作，但研究小组希望在下一代游戏机开始推出时，控制器能达到生产阶段。
击败奥巴马，罗姆尼在'无限刀片'创造者的新政治游戏
下一个游戏将由无限刀锋的创造者提供，玩家可以扮演卡通人物巴拉克•奥巴马或米特•罗姆尼的角色，在政治辩论中用武器而不是语言击败对手。 iOS游戏投票！！！奖励玩家的分数可以转换成选票，可以应用于世...
ouya开发者工具包演练提供了kickstarter资助的控制台的早期视图
...触摸板被描述为仅仅是足够的，并且控制器缺少专用的“开始”和“菜单”按钮。不过，在超过63000名Kickstarter支持者几个月后开始交付之前，Ouya仍有时间改进其开创性的游戏机。
《行尸走肉》背后的公司为何涉足独立游戏
...，并将这些声音融入其中。” 这项工作的成果最近才开始显现。今年，Skybound与两家不同的游戏工作室合作，在这一过程中扮演了一个几乎像出版商一样的角色。这些游戏包括Oxenfree和迷宫，这是一款极具收藏价值的纸牌游...
twitch正在帮助开发者创建流媒体游戏
...宣布了一项名为“流优先”的新计划，希望能鼓励开发者开始将Twitch功能直接集成到他们的游戏中。作为宣布的一部分，Twitch还宣布了一套新的开发服务，以帮助创作者添加这些功能，以及“流优先”游戏的第一个三重奏，展示...
0 篇文章
