Phaser3入门级程序开发-详细介绍

最新推荐文章于 2024-06-05 09:44:59 发布

一个平凡de人

最新推荐文章于 2024-06-05 09:44:59 发布

阅读量1.9k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_46703850/article/details/115440182

版权

这篇博客详细介绍了如何使用Phaser3开发入门级游戏，包括项目资源、结构、主要代码解析，如config对象、预加载资源、创建场景、角色控制、物理引擎应用等，逐步引导读者理解Phaser3游戏开发流程。

摘要由CSDN通过智能技术生成

Phaser3入门级程序开发-详细介绍

1.项目资源
2.项目结构
3.项目详解
4. main.js主文件完整代码

学习Phaser3入门教程：第一个Phaser3游戏（中文版）（一）系列后写的

这个项目是Phaser提供的入门级程序

1.项目资源

项目需要一些图片和phaser.js文件

图片可以通过原项目下载获得,也可以直接在这下载,Phaser3入门级程序所需图片
phaser.js文件可以去Phaser官网下载,也可以在html引入网上的,还可以将网上的copy到本地使用。我用的是将网上的copy到本地使用。

<!--在html引入网上的-->
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>

<!--copy到本地使用-->
<script src="assets/js/phaser.js"></script>

2.项目结构

在这里插入图片描述

3.项目详解

3.1 index.html

引入两个重要的javascript文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>星星大作战</title>
    <script src="assets/js/phaser.js"></script>
    <script src="assets/js/main.js"></script>
    <style type="text/css">
        body {
    
            margin: 0;
        }
    </style>
</head>
<body>

</body>
</html>

3.2 main.js主文件

3.2.1 初始摸版

初始摸版,不断向里面添加内容

var config = {
   
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
   
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload (){
   }
 
function create (){
   }

function update (){
   }

3.2.2 config对象

定义了一个config对象配置Phaser 游戏

var config = {
   
    type: Phaser.AUTO,//渲染器
    width: 800,//画面尺寸
    height: 600,
    scene: {
    // 默认的场景
        preload: preload,
        create: create,
        update: update
    }
};

3.2.3 Phaser.Game实例

接着定义了一个叫作game变量来指向一个Phaser.Game实例，而对象config作为参数传入到该实例中，现在我们就启动了一个进程，开启了Phaser的生命周期。

var game = new Phaser.Game(config);

3.2.4 preload ()载入所需的资源

我们只需要在场景函数preload中加入Phaser的载入代码即可，Phaser将自动调用该函数并执行里面的内容。
这里载入4个图片和一个精灵表单。第一个参数是资源的名称,第二个参数是资源的路径

function preload (){
   
    this.load.image('sky', './assets/image/sky.png');
    this.load.image('ground', './assets/image/platform.png');
    this.load.image('star', './assets/image/star.png');
    this.load.image('bomb', './assets/image/bomb.png');
    this.load.spritesheet('dude', './assets/image/dude.png', {
    frameWidth: 32, frameHeight: 48 });
}

3.2.5 create ()显示图像

在create ()添加显示图像的代码,此时有效果1:

function create (){
   
    // 一个简单的游戏背景
    this.add.image(400, 300, 'sky');
}

效果1:

3.2.6 在场景中添加平台

var platforms; // 全局变量

function create (){
   
    this.add.image(400, 300, 'sky');
    
    //  平台组包括地面和三个我们可以跳上去的平台
    // his.physics:含义是我们要使用物理引擎,这句代码创建了一个静态物体组,在Arcade物理模式中，有两种属性的物体：动体和静体
    platforms = this.physics.add.staticGroup();

    //  这里我们创建地面，缩放它以适应游戏的宽度(原始精灵的大小是400x32)。
    // 调用方法setScale(2),将图片拉宽到两倍,refreshBody()告诉系统更新它。
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    //  创建三个我们可以跳上去的平台
    platforms.create(