如何使用Phaser3和Webpack正确加载图像和精灵工作表？
Phaser3是一款流行的HTML5游戏开发框架，而Webpack是一个模块打包工具。结合使用Phaser3和Webpack可以有效地加载图像和精灵工作表，以下是正确的步骤：
- 首先，确保你已经安装了Node.js和npm（Node包管理器）。
- 创建一个新的项目文件夹，并在命令行中进入该文件夹。
- 初始化npm项目，运行以下命令：
npm init -y- 安装Phaser3和Webpack，运行以下命令：
npm install phaser webpack webpack-cli --save-dev- 在项目文件夹中创建一个名为
src的文件夹，并在其中创建一个名为index.js的文件，这将是你的主要JavaScript文件。 - 在
index.js文件中，引入Phaser3和你需要加载的图像和精灵工作表，例如：
import Phaser from 'phaser';
import image from './assets/image.png';
import spritesheet from './assets/spritesheet.png';- 在
index.js文件中，创建一个Phaser3游戏实例，并在preload函数中加载图像和精灵工作表，例如：
const game = new Phaser.Game({
// 游戏配置
});
function preload() {
this.load.image('image', image);
this.load.spritesheet('spritesheet', spritesheet, { frameWidth: 32, frameHeight: 32 });
}
function create() {
// 游戏创建逻辑
}
function update() {
// 游戏更新逻辑
}
game.scene.add('main', {
preload,
create,
update,
});
game.scene.start('main');- 在项目文件夹中创建一个名为
webpack.config.js的文件，并配置Webpack，例如：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};- 在命令行中运行以下命令，使用Webpack打包你的项目：
npx webpack- 在项目文件夹中创建一个名为
index.html的文件，并在其中引入打包后的JavaScript文件，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Phaser3 and Webpack</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>- 在命令行中运行一个本地服务器，例如：
npx http-server- 在浏览器中访问本地服务器的URL，即可看到使用Phaser3和Webpack加载图像和精灵工作表的效果。
这样，你就成功地使用Phaser3和Webpack正确加载图像和精灵工作表了。
相关·内容
我有一个Vue应用程序，上面有Webpack和Phaser3，我正在尝试在我的主场景中加载图像和spritesheet。使用该技术后，spritesheet被加载，但我发现，Webpack对这两个图像的要求是不同的，我不知道为什么。此外，在将应用程序部署到服务器时，不建议使用大量数据URI。我的Webpack会议似乎有正确的加载器 {
tes
浏览 49提问于2019-09-20得票数 4
回答已采纳
在C#脚本中加载它们是很实用的，我尝试了以下方法(for-loop)：有没有一种方法可以加载它们，并在代码中将它们放入Sprite数组(Sprite[])？正确的路径是什么？
浏览 1提问于2014-04-17得票数 0
2回答
我将我的构建系统从具有自定义任务的Grunt迁移到了Webpack。至于JavaScript模块，它工作得很好，但是我不确定如何处理我的Sass样式表。我在我的AMD模块中依赖于Sass文件，Webpack可以从这些文件中读取并生成bundle.css。但理想情况下，我希望让我的构建管道使用spritesmith生成sprites，然后将图像复制到构建目录，并使用Sass混合来生成正确的CSS规则。我已经在SO和Go
浏览 4提问于2015-03-02得票数 6
1回答
我正在遵循一个非常基本的Phaser3示例，但问题是dist文件夹只包含一个bundle.js文件，并且所有资源仍然从src文件夹加载。文件夹结构： distsrc - bmo.png - game-scene.ts 加载代码： export class/src/assets/bmo.png');} 但现在图像是从src文件夹加载的！这不对吧？如何导出包
浏览 9提问于2019-03-19得票数 2
1回答
我们的项目遇到了非常高的RAM使用率。我们使用java，libgdx和许多sprites。我们希望将精灵升级到81帧512x512的png，由于我们的实体是精灵(身体、头部、头发、武器、衣服)的组合，我们想在一次讨论500-1000个精灵的时候给出一些变化，这些精灵可能会(在极端情况下)并行/快速使用。我们尝试了一些(~10)的精灵，它使用6+GB内存，所以这是不可能的方式太多。
我们现在已经将分辨率缩小到
浏览 10提问于2018-08-16得票数 2
2回答
使用旋转设置动画
、、、、
您控制第一只鸟(通过绘制一条路径让它跟随/使用dpad)，然后一群较小的鸟排成一条线跟随它。这些鸟是动画的，可以旋转180度并进行镜像(取决于它们飞过的位置)。现在我的问题是，我是应该制作一个spritesheet并减少可能的旋转次数(例如，每10°一组精灵)，还是计算每只鸟的动画，还是保持我的方式？
浏览 2提问于2011-07-25得票数 0
回答已采纳
我正在尝试在我的应用程序中使用精灵工作表动画。第一个带有小的精灵工作表的POC运行良好，但当我将精灵工作表更改为更大的精灵工作表时，我收到"check_safe_call: and‘t restore current frame“警告，应用程序退出我读到iphone最多支持3Mb大小的图像，尺寸可达1024 * 1024。此外，
浏览 2提问于2010-06-01得票数 1
回答已采纳
1回答
我正在制作一个从spritesheet加载图像的游戏。在iPhone 4模拟器或iPad模拟器上运行时，可以从各种精灵工作表正确加载纹理。在iPhone 4S或5或retina iPads上运行时，精灵工作表的比例会发生变化。图片将有助于更好地解释这一点：
正确显示：纹理贴图上的比例错误：很明显，在
浏览 1提问于2012-11-10得票数 0
回答已采纳
我正在使用easeljs库。我使用sprite生成器创建了一个包含所有资源(按钮、背景图像、图标等)的精灵工作表。我得到了一个精灵工作表和一个css文件(包含坐标，尺寸)。我需要加载雪碧表中的每一个图像。
浏览 4提问于2013-05-09得票数 1
回答已采纳
1回答
对于我的C- SDL视频游戏，我需要使用自己制作的spritesheet。// |---------------| YIncrement++;但是现在我不知道如何在上面加载我的
浏览 0提问于2012-05-05得票数 0
回答已采纳
1回答
Css精灵和定位
、、
我正在使用令人惊叹的为我的样式表生成sprites。我可以生成精灵并将它们用作背景，这一切都运行得很好。
问题是以前我使用background-position在一个元素中定位我的背景。但是，如果我切换到指南针精灵并使用@extend .system-bottom-bg;，background-position属性将用于从精灵贴图中获取图像的适当位置。在这种情况下，如何在使用css精灵的同时仍然能够
浏览 1提问于2012-03-23得票数 2
回答已采纳
我正在使用纹理包装器为我所有的游戏图像资源创建精灵工作表。我最终使用了5张纸的多包装，最大尺寸为2048x2048。我有大量的精灵被加载到不同的容器中，精灵，平铺精灵，等等。我应该根据它们将要加载的容器更智能地创建这些精灵工作表吗？
我觉得我做了一些根本错误的事情，因为我的表现似乎不是最好的。我把我的游戏减少到只加载6个
浏览 8提问于2017-06-04得票数 0
2回答
我用的是phaser3和免费的纹理封隔器，能做到吗？如果是，请告诉我怎么做？我尝试使用addAtlasJSONHash，但是它记录了这个函数是未定义的，所以我尝试了game.addAtlasJSONHash，但是同样的错误正在发生。
浏览 8提问于2022-04-07得票数 0
回答已采纳
3回答
我来自2D动画背景，所以当我使用动画序列时，我更喜欢使用图像序列。对我来说，这很有意义，因为您可以轻松地从合成/编辑软件中导出图像序列，并轻松定义纵横比。我是游戏开发的新手，对sprite sheet的使用很好奇。优点和缺点是什么？文件大小是个问题吗？-在我看来，一堆小图片和一张大图片是一样的。此外，定义精灵的每个单独区域似乎在时间上很麻烦。基本上，我不明白你为什么要用精灵纸--请告诉我。
谢谢
浏览 3提问于2010-08-13得票数 3
回答已采纳
1回答
我目前正在开发一个使用Unity3d的游戏，我的设计师给了我一堆由After-Effect创建的图像，它应该显示人物动画，每个动画都有它自己的精灵包，但我的游戏变得太慢，因为要加载的图像数量，所以我决定使用纹理包装器来减少图像的数量，并只创建一个包含我的动画的所有图像的multiple类型的精灵工作表，但我的问题是:创建精灵工作表后，动画开始有一
浏览 4提问于2015-03-09得票数 0
我正在处理一个sprite工作表，我想为每个帧生成单独的图像，希望使用一些方便的命名约定。我已经设置了图像网格，这样每个单独的帧都位于网格的一个矩形中，我希望GIMP能够使用这个间距和偏移量自动生成一个文件列表，根据它们所在的行和列命名图像。但是，如果我有文件列表，那么使用一个简单的脚本正确地命名它们是很简单的，因此文件的命名只是一个方便的添加。
目前，我正在使用裁剪工具手动裁剪每
浏览 0提问于2018-09-30得票数 2
回答已采纳
我正在使一个phaser3可播放的广告，并要求把图像和其他资产在一个单一的超文本标记语言文件。我可以使用textures.addBase64加载图像，但如何使用base64加载地图集。另外，如果你能告诉我如何将JSON放在HTML文件中，以便我可以在加载地图集时参考它。谢谢你，?
浏览 57提问于2021-03-05得票数 1
我不知道我是否对Unity Edit做了任何错误的设置，或者我需要单击更多的东西来导入切片精灵。它可以正确地切片一切，因为我可以按下不同的对象并看到边界，我单击应用，当我按x时，如果我再次单击应用。当Sprite编辑器关闭时，我没有得到任何切片精灵到我的项目文件夹。那么，我的问题是如何从精灵编辑器导入自动切片精灵到我的项目中？ 请帮帮我，看起来我真的很傻，想一个人解决这个问题。 感谢您花时间阅读我的帖子。我希望有一位专家可以帮助我解决这个问题…… 附注：所以我像这样切片，我点击slice
浏览 23提问于2019-02-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
