Phaser3学习笔记：背景无限滚动

最新推荐文章于 2026-05-31 02:09:20 发布

原创

最新推荐文章于 2026-05-31 02:09:20 发布 · 1.2k 阅读

收录于

本文介绍了在Phaser3游戏引擎中如何实现背景的无限滚动效果，通过结合游戏循环和背景图片的定位，创建出动态的视觉体验。这种技术常用于增强游戏的沉浸感。

phaser3 简单实现背景滚动的方式是使用tileSprite

class GameScene extends Phaser.Scene {
   
   
  constructor() {
   
   
    super({
   
    key: 'GameScene' })
  }
  preload(<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

peade

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

phaser3-health-bar-plugin:用于Phaser 3的带有滚动战斗文本的Health Bar插件

05-25

Phaser3插件模板 Phaser 3的基本插件模板，可让您创建自己的插件。运行npm install ，然后npm run build来构建插件。在Phaser 3中使用插件您可以从外部加载插件，也可以将其包含在捆绑包中。加载外部插件： function preload () { this.load.plugin('BasePlugin', 'path/to/healthBarPlugin.js'); } 然后将其安装到场景中： this.sys.install('BasePlugin'); 如果将插件加载到Preloader场景中，则可以通过在plugins数组中指定它们来将它们添加到任何其他场景中： var config = { scene: { create: create, plugins: [ 'B

参与评论您还未登录，请先登录后发表或查看评论

phaser-animated-tiles:一个向Phaser 3添加对动画拼贴的支持的插件

05-02

Phaser 3 Animated Tiles插件一个简单的插件，目的很简单：将动画切片的支持添加到从Tiled导出的Phaser 3（3.8.0+）中。捆绑的示例可在此处实时获得： : 该平台示例中也使用了该插件： : 该插件基于Photonstorms插件模板： : 可以在dist文件夹或NPM中找到最新的版本： : 运行npm install ，然后npm run build来构建插件。特征此插件同时支持无限的地图，图层和图块集。在指定的tilemap或图层中，有一些方法可以全局控制动画。这些方法可以控制所有图块和指定图块的回放速率。在ATM上，您可以跟踪添加的地图及其图层的索引。在大多数情况下，这应该不是问题。如果您只想完全支持Tiled中指定的动画图块，则需要三行；一个预加载插件，一个在您的create方法中注册它，另一个为您的地图初

Phaser（二）：小恐龙跑酷游戏

You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉

08-01

1113

创建地图放置障碍物添加玩家操作和动画玩家与障碍物碰撞游戏结束添加场景装饰云和石头完整代码

Vue 3 + Phaser 3 实战：手把手教你打造一个可交互的2D小游戏（附完整源码）

weixin_30800807的博客

05-04

275

本文详细介绍了如何使用Vue 3和Phaser 3集成开发一个可交互的2D小游戏。从环境搭建、游戏场景与Vue状态管理的结合，到双向绑定与事件通信的实现，再到性能优化与调试技巧，手把手教你完成一个完整的太空射击游戏案例，并附上完整源码。

phaserbackground:使用 Phaser JS 的背景效果和不同状态

07-08

Phaser，全局背景不同状态这是一个使用 Phaser 框架的 html5/javascript 测试。目标是为几个 Phaser.state 对象创建背景和淡入/淡出效果。背景和淡入淡出效果是使用单独的全局函数创建的，因此它们可以在不同的状态对象中重复使用。另一个目标是使用尽可能少的资源，以免干扰游戏的其余部分。有关更多信息，请参阅：也在 html5gamedevs 论坛上发布了这个：问题、评论：

H5游戏开发之phaser学习笔记（一）

新博客地址：blog.songchunmin.com

04-09

4957

H5游戏开发之phaser学习笔记（一）

完整指南：使用Phaser构建Flappy Bird克隆版游戏

gitblog_00777的博客

04-23

420

Flappy Bird是一款经典的休闲游戏，通过Phaser游戏框架可以轻松实现类似的游戏体验。本指南将带你了解如何使用Phaser引擎构建一个属于自己的Flappy Bird克隆版游戏，从环境搭建到核心功能实现，让你快速掌握HTML5游戏开发的基础知识。 ## 📋 准备工作 ### 开发环境要求 - 现代浏览器（Chrome、Firefox等） - 文本编辑器（VS Code推荐） - G

免费学习Phaser游戏开发：10个实战项目源码分析

gitblog_00516的博客

04-23

354

GitHub 加速计划 / game / games 是一个基于Phaser的小游戏集合，包含了多种类型的游戏项目，非常适合Phaser游戏开发新手通过实战来学习。本文将为你介绍10个精选项目，帮助你快速掌握Phaser游戏开发的核心技能。 ## 一、2048游戏：经典数字合成游戏 2048是一款经典的数字合成游戏，通过移动方块让相同数字合并，最终目标是得到2048这个数字。在项目的2048目

突破加载瓶颈：Phaser游戏资源优先级与动态加载动画全解析

gitblog_00985的博客

02-10

404

Phaser是一款快速、免费且有趣的2D游戏框架，专为在桌面和移动Web浏览器中制作HTML5游戏而设计，支持Canvas和WebGL渲染。在游戏开发中，资源加载是影响用户体验的关键环节。本文将深入探讨如何通过Phaser的资源优先级管理和动态加载动画，有效突破加载瓶颈，提升游戏性能和用户体验。 ## 为什么资源加载优化至关重要？游戏加载速度直接影响玩家留存率。根据研究，超过3秒的加载时间会

H5游戏开发：FC小蜜蜂

前端栈开发

07-04

1948

前言说起任天堂 FC 那是充满我们童年寒暑假的回忆，那时候没有正版红白机，玩的是几十块一台的山寨小霸王，十块一张的卡带，玩着魂斗罗、马里奥、淘金者、快打旋风、打鸭子等等。进入正题，今天我们来说说怎么做一个 FC 小蜜蜂游戏，游戏玩法是通过操控飞机，通过发射子弹对蜜蜂造成伤害，蜜蜂全部歼灭则视为胜利。初始化本次游戏采用 Phaser 引擎进行开发，Phaser 是一个快速、免费、易于维护的开源 2D...

Tile-Studio：Tile Sprite地图编辑器

02-05

瓷砖工作室这是Tile Studio的Delphi源代码。有关更多信息，请参见。当前支持的Delphi版本是：德尔福5 Delphi 10.1入门版

指尖大冒险H5小游戏

weixin_33813128的博客

04-26

214

前些天看了一篇很赞的文章，又因为想学习phaser，所以有了这个案例，在线预览可以点下方链接。本案例中，核心原理是按文章中所提到的内容制作，整体遵循“大道至简”的原则开发，其实是懒的去封装模块。。。在线预览文中代码可以访问本人github------ 关键技术点除去上面提到的文章中的技术点外，还有几处需要注意的地方： 1. 元素渲染层级开发时候不注意的话，某些情况下可能会出...

从跑酷到实时联机：5个能直接用的Web游戏开发需求

最新发布

2501_94004174的博客

05-31

410

所有绘图用 Canvas 2D，纯几何图形（圆形为敌人，方形为塔，小圆点为子弹），无外部图片。- 资源：初始金币150，击败敌人得金币（普通+20，快速+10，高防+30）。- 迷宫生成：递归回溯算法生成 15x15 迷宫，墙壁高2，玩家出生在对角位置（第一人称或第三人称俯视可选）。- 波次：共5波，敌人数3/5/7/10/12，波次间15秒准备，显示倒计时和“下一波”按钮（可跳过）。- 敌人类型：普通（红色，3血）、快速（黄色，1血，速度1.5倍）、高防（蓝色，5血，速度0.7倍）

Phaser3入门教程：第一个Phaser3游戏（中文版）（二）

sql_cn的博客

09-14

2628

装载资源现在要为我们的游戏载入所需的资源了。我们只需要在场景函数preload中加入Phaser的载入代码即可，Phaser将自动调用该函数并执行里面的内容。当前的preload函数体为空，我们将它改成下面这样： function preload () { this.load.image('sky', 'assets/sky.png'); ...

在phaser游戏里面不用html做slider（上下滑动）

无常的博客

09-10

1441

因为我们的项目是都在phaser里面做的，但是phaser里面是没有上下滑动的，所以一般都是利用分页来做这种一页放不下的情况。但是有时候也会有slide的需求吧。那么先上图。我把它做成一个工具类（或说组件），要考虑两个问题。 1.slideBar的上下拖拽，与容器内的视图上下联动。 2.容器内的视图在上下移动时候如何隐藏。首先，我把视图内对象都放入一个group中，再放入容器，将s...

使用Phaser 3构建可扩展游戏世界的Tilemaps教程

gitblog_00027的博客

05-25

724

使用Phaser 3构建可扩展游戏世界的Tilemaps教程去发现同类优质开源项目:https://gitcode.com/ 在这个开源项目中，我们将引导您探索如何在Phaser 3框架下利用Tilemaps构建模块化的游戏世界。这个系列教程已被更新至最新的v3.55.2版本，确保了最佳的开发体验。 1、项目介绍该项目是一组详细的教程，包含了五个部分，从静态地图开始，逐步深入到动态平台游戏、程...

phaser制作跑酷游戏

章鱼小丸子

07-26

2846

首先在index.html里面引入phaser.js 和自己创建的game.js设置canvas的css样式canvas{ margin:0 auto;}接下来用一个类方法封装整个游戏(function() {}());在function里面定义游戏（function(){ var SantaGame = { init: function() { this.g

4.phaser移动图片

weixin_34184158的博客

12-11

285

根据之前的代码我们在create中添加代码：然后定义两个变量在场景中添加文字，并设置位置为0，0 创建新监听函数预览：发现文字并没有出现！！！单击一下就出来了转载于:https://www.cnblogs.com/releed/p/6158420.html...