有什么html5游戏开发方面的书（Phaser-有趣的开源）
有什么html5游戏开发方面的书（Phaser-有趣的开源）使用 Python 的简单 HTTP 服务器Grunt是一个非常强大的安装工具，无论您是否将其用作 Web 服务器。从本质上讲，它是一个基于 JavaScript 的任务运行器，允许您自动执行繁琐耗时的任务。例如，我们在 Phaser 中使用它来构建我们的分发脚本。但它也可以使用插件Connect进行配置，以提供本地文件，充当 Web 服务器。操作系统作为一个本质上的 Unix 环境，OS X 上的可用选项比 Windows 多。但是，如果您想要像 WAMP 这样的“一体式”方法，具有干净且易于使用的界面，那么我们强烈推荐MAMP。Grunt连接
《开源精选》是我们分享github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的Phaser 是一个快速、免费且有趣的开源 html5 游戏框架。
Phaser 是一个快速、免费且有趣的开源 HTML5 游戏框架，提供跨桌面和移动 Web 浏览器的 WebGL 和 Canvas 渲染。可以使用 3rd 方工具将游戏编译为 iOS、Android 和本机应用程序。您可以使用 JavaScript 或 TypeScript 进行开发。
安装使用安装 Web 服务器
我们会推荐WAMP Server或XAMPP，两者都有简单的设置指南。WAMP 专门将一个图标安装到您的系统托盘中，您可以从中停止和重新启动服务，以及修改 Apache 设置，例如为项目创建新的文件夹别名。
操作系统
作为一个本质上的 Unix 环境，OS X 上的可用选项比 Windows 多。但是，如果您想要像 WAMP 这样的“一体式”方法，具有干净且易于使用的界面，那么我们强烈推荐MAMP。
Grunt连接
Grunt是一个非常强大的安装工具，无论您是否将其用作 Web 服务器。从本质上讲，它是一个基于 JavaScript 的任务运行器，允许您自动执行繁琐耗时的任务。例如，我们在 Phaser 中使用它来构建我们的分发脚本。但它也可以使用插件Connect进行配置，以提供本地文件，充当 Web 服务器。
使用 Python 的简单 HTTP 服务器
如果您需要一个快速运行的 Web 服务器，并且不想搞乱设置 Apache 或下载应用程序，那么 Python 可以提供帮助。Python 带有一个简单的内置 HTTP 服务器，它可以提供来自任何本地文件夹的文件。
选择编辑器
您将需要一个编辑器来准备您的 JavaScript 代码。
示例：Sublime Text 这是 Phaser 团队用于构建框架和所有项目的编辑器。它甚至是编写本指南的编辑器。Sublime 应该被认为是一个非常强大的文本编辑器，而不是一个 IDE。
下载 Phaser
Phaser 3 可通过 GitHub、npm 和 CDN 获得：
- 通过https、 ssh 或使用 GitHub Windows或Mac客户端克隆 git 存储库。
- 下载为zip
- 下载构建文件：phaser.js和phaser.min.js
通过npm安装：
npm install phaser
内容分发网络：
Phaser 位于 jsDelivr 上，这是一个“面向开发人员的超快速 CDN”。在您的 html 中包含以下内容：
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
或缩小版：
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
Hello World!
设置好编辑器、安装 Web 服务器并下载 Phaser 后，就可以创建一些东西并检查一切是否正常。
您需要发现您的“网络根”在您的机器上的位置。这是服务器在其中查找文件的文件夹。如果您在 Windows 上使用 WAMP，您可以通过单击系统托盘中的 WAMP 图标并从弹出菜单中选择“www 目录”来找到它。其他服务器将有其他确定位置的方法，但从这一点开始，我们将其称为“webroot”。
在 webroot 内部创建一个名为的文件index.html并将以下代码粘贴到其中：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO
width: 800
height: 600
physics: {
default: 'arcade'
arcade: {
gravity: { y: 200 }
}
}
scene: {
preload: preload
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://labs.phaser.io');
this.load.image('sky' 'assets/skies/space3.png');
this.load.image('logo' 'assets/sprites/phaser3-logo.png');
this.load.image('red' 'assets/particles/red.png');
}
function create ()
{
this.add.image(400 300 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100
scale: { start: 1 end: 0 }
blendMode: 'ADD'
});
var logo = this.physics.add.image(400 100 'logo');
logo.setVelocity(100 200);
logo.setBounce(1 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
</script>
</body>
</html>
打开您的网络浏览器并加载index.html页面。这可能就像在浏览器中输入localhost/或输入一样简单。127.0.0.1/或者您可能还需要指定端口号，这完全取决于您使用的服务器设置方法。
打字稿定义
TypeScript 定义可以在文件types夹中找到。它们也在 中的类型条目中被引用package.json。根据您的项目，您可能需要将以下内容添加到tsconfig.json文件中：
"typeRoots": [
"./node_modules/phaser/types"
]
"types": [
"Phaser"
]
游戏状态
|
Class |
通过 |
描述 |
|
StateManager |
state |
创建、管理和交换您的游戏状态。 |
|
State |
您可以扩展的基本游戏状态对象。 |
装载机
|
Class |
通过 |
描述 |
|
cache |
cache |
缓存是存储和检索所有加载资产的地方。 |
|
Loader |
load |
加载所有外部资产类型（图像、音频、json、xml、txt）并将它们添加到缓存中。由 Statespreload方法自动调用。 |
|
LoaderParser |
加载器用来处理复杂资产类型解析的静态类。 |
文本
|
Class |
描述 |
|
Text |
使用系统字体或 Web 字体显示文本，并带有可选的填充、阴影和描边。 |
|
BitmapText |
使用位图字体文件的基于纹理的文本对象。 |
|
RetroFont |
类似于 BitmapText 对象，但使用经典的精灵表。每个字符都是固定宽度的。 |
动画片
|
Class |
通过 |
描述 |
|
AnimationManager |
sprite.animations |
在 Sprite 游戏对象上添加、播放和更新动画。 |
|
Animation |
动画管理器创建的基础动画对象。 | |
|
AnimationParser |
Phaser Loader 在内部使用它来解析来自外部文件的动画数据。 | |
|
FrameData |
组成动画的 Frame 对象的集合。 | |
|
Frame |
动画的单帧。存储在 FrameData 对象中。 |
时间
|
Class |
通过 |
描述 |
|
Time |
time |
所有 Phaser 时间相关操作所依赖的内核内部时钟。 |
|
Timer |
time.create |
包含一个或多个 TimerEvent 的自定义 Timer。可以使用一次，也可以设置为重复使用。 |
|
TimerEvent |
time.add |
单个时间相关的事件对象。属于 Phaser.Timer。 |
Tilemaps
|
Class |
描述 |
|
Tilemap |
一个 Tilemap 由一个或多个 TilemapLayers 和相关的瓦片数据组成。包含用于切片数据操作和 TilemapLayer 生成的方法。 |
|
TilemapLayer |
Tilemap 中的单个图层。从 Phaser.Sprite 扩展并负责渲染自身。 |
|
Tileset |
包含用于由 TilemapLayer 渲染图块的纹理和数据的对象。 |
|
Tile |
具有相关属性的单个 Tile 对象。其中一个存在于地图中的每个图块中。 |
|
TilemapParser |
用于解析外部加载的地图数据的静态类。通常由 Phaser.Loader 直接调用。 |
在本地创建一个index.html页面并将以下代码粘贴到其中：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<script></script>
</body>
</html>
这是一个标准的空网页。你会注意到有一个脚本标签正在拉入 Phaser 3 的构建，但除此之外，这个网页还没有做任何事情。现在让我们设置游戏配置。<script></script>在标签之间粘贴以下内容：
var config = {
type: Phaser.AUTO
width: 800
height: 600
physics: {
default: 'arcade'
arcade: {
gravity: { y: 200 }
}
}
scene: {
preload: preload
create: create
}
};
config是一个非常标准的 Phaser 3 游戏配置对象。如果可以的话，我们告诉config使用 WebGL 渲染器，将画布设置为 800x600 像素的大小，启用 Arcade Physics，最后调用preload和create函数。preload并且create还没有实现，所以如果你运行这段 JavaScript 代码，你会遇到错误。在 之后添加以下内容config：
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('https://labs.phaser.io');
this.load.image('sky' 'assets/skies/space3.png');
this.load.image('logo' 'assets/sprites/phaser3-logo.png');
this.load.image('red' 'assets/particles/red.png');
}
function create ()
{
}
game是一个使用我们的配置对象的 Phaser Game 实例config。preload我们还为和添加了函数定义create。该preload功能可帮助您轻松地将资产加载到游戏中。在preload中，我们将 Base URL 设置为 Phaser 服务器并加载 3 个 PNG 文件。该create函数是空的，所以是时候填充它了：
function create ()
{
this.add.image(400 300 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100
scale: { start: 1 end: 0 }
blendMode: 'ADD'
});
var logo = this.physics.add.image(400 100 'logo');
logo.setVelocity(100 200);
logo.setBounce(1 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
在这里，我们将天空图像添加到游戏中并创建粒子发射器。该scale值意味着粒子最初会很大，随着寿命的延长会缩小到零。
创建 后emitter，我们添加一个名为logo. 由于logo是物理图像，logo默认情况下被赋予物理体。我们设置了一些属性logo：速度、反弹（或恢复）以及与世界边界的碰撞。这些属性将使我们的标志在屏幕上反弹。最后，我们告诉粒子发射器跟随 logo - 所以当 logo 移动时，粒子将从它流出。
在浏览器中运行它，您将看到以下内容：
—END—
开源协议：MIT License
开源地址：https://github.com/photonstorm/phaser
