phaser 基本入门使用

最新推荐文章于 2025-04-05 17:01:52 发布

十八流选手益达张

最新推荐文章于 2025-04-05 17:01:52 发布

阅读量1k

点赞数

分类专栏： phaser 文章标签：游戏开发

本文链接：https://blog.youkuaiyun.com/u013108007/article/details/107887907

版权

phaser 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何初始化一个基于Phaser的游戏开发项目，包括安装Webpack、配置开发环境，设置.babelrc和tsconfig.json文件，以及创建基本的index.html、index.ts和webpack.config.js文件，最终实现一个简单的游戏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化项目

npm init  -y

安装webpack

npm i webpack@next -D  //yarn add  webpack@next

安装webpack cli

npm i webpack-cli@next -D  //yarn add  webpack-cli@next

配置 “dev”: “webpack --mode development”

安装phaser

npm i phaser -D  //yarn  add  phaser

安装babel-load

npm i @babel/preset-env -D //yarn  add
npm i @babel/core -D
npm i @babel/preset-typescript -D

index.ts

import { AUTO, Game, Scene } from "phaser";
class Demo extends Scene {
    constructor() {
        super("demo");//继承父类 并传入名字
    }
    public preload() { //j静态资源
        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');
    }
    public create() {//生命周期
        this.add.image(400, 300, "sky");//图片坐标 及对象
        const particles = this.add.particles("red");//创建粒子
        const emitter = particles.createEmitter({ //粒子发射器 可以官网导出配置
            speed: 100,//速度
            scale: { start: 1, end: 0 },//缩放
            blendMode: "ADD",
        });
        const logo = this.physics.add.image(400, 100, "logo");//创建物理引擎 并添加展示对象
        logo.setVelocity(100, 200);//运动速度 抛物线
        logo.setBounce(1, 1);//弹性系数
        logo.setCollideWorldBounds(true);//碰撞检测
        emitter.startFollow(logo);//光影跟随
    }
}
const  config: Phaser.Types.Core.GameConfig =  {
    type: AUTO,
    width: 800,
    height: 600,
    parent: "main",
    physics: {
        default: "arcade",
        arcade: {
            gravity: {
                y: 200
            }
        }
    },
    scene: Demo
}
const game = new Game(config);

###index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>game demo</title>
    <style>
      :root{
        --yd:()=>{
          console.log(123);
        }
      }
      /* css in js */
    </style>
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    app: resolve('src/web/index.ts'),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: resolve(__dirname, './src/web/index.html'),
    }),
  ],
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-typescript"]//编译ts
  }

tsconfig.json

{
    "compilerOptions": {
      "target": "ES5" //编译环境
    },
    "include": ["src"],
    "exclude": ["node_modules"]//排除
  }

简单效果