Phaser – 有趣的开源 HTML5 游戏框架

大家好，欢迎来到IT知识分享网。

《开源精选》是我们分享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/或者您可能还需要指定端口号，这完全取决于您使用的服务器设置方法。

API 文档

打字稿定义

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 直接调用。

Phaser 3 示例

在本地创建一个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 渲染器，将画布设置为 800×600 像素的大小，启用 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

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/161919.html

Phaser – 有趣的开源 HTML5 游戏框架

安装使用

API 文档

Phaser 3 示例

相关推荐

发表回复