Search the Community

looking for a way to replace a preloaded spritesheet's image file. something like: game.load.spritesheet('player', 'img/player.png', 32, 64) changes to: game.load.spritesheet('player', 'img/player2.png', 32, 64) i've tried calling the second line after the preload function but it doesn't seem to work.

Hello, html5 freaks I trying to make idle game using pixijs, but when I put animated sprite that is 1024x512 in size it freeze game short time. From profiler I saw that texImage2d took 180ms and from that 104ms was imageDecode. I read somewhere to preload the animations before hand and just make them visible when needed, but it didn't work and same texImage2d happend. How I can prevent that other than downscaling the sprite? Also is there possibility to do that in webworker? I read somewhere that pixi is starting to be capable of rendering on webworker. Cheers, Jakub

I am working on a game that has few background graphics, these are stored in app bundle at big resolutions like 2000x2000 pixels to support bigger devices like iPad pro. Obviously something this big is an overkill for mobile and I wanted to ask if following optimisation assumption is correct: 1. I preload these assets with pixi loader 2. I create sprite for each texture 3. I then resize this sprite to fit device dimensions better i.e. 1000x1000 px for iphone When I inspect my sprites textures I still see them at 2000x2000 pixels even though sprite itself is 1000x1000. I am concerned that I am not optimising this correctly, especially because I use prepare plugin https://pixijs.download/dev/docs/PIXI.Prepare_.html for some of these assets, I upload my sprites not textures, but I still feel like I might be uploading those big 2000x2000 assets alongside which is a problem, as these occupy a lot of GPU memory. Hence this thread to clarify if my approach to this problem is correct. I don't want to create separate asset resolutions i.e. 2x / 3x etc if possible to avoid increasing final app bundle size.

I wanted to know if it's possible to load an animated sprite in preload() and use it in preload(). Essentially I am trying to get an animal to run across the screen to mark the progression of loading. I have a simple graphic rectangle setup as a basic loading bar right now. If I try to update the position of the sprite with this.dog.x it throws an error that x is not a property.

Hi all, I am doing a test to a client who ask me to build a dynamic using a sequence of 3D rendered images, I told him than that is not the right way in WebGl, the correct is to convert the 3D objects and use than. But he said than right now they can not do that. So I tryed to use Dynamic Texture with canvas method and it works, but I wanna know if somebody knows a way to preload the sequence of images in BJS, to get better? Because I think that has a delay right now about the loading issue. You can see it here http://iprojects.space/upwork/laval/ Thanks

Bowmasters.Preloader = function(game){ }; Bowmasters.Preloader.prototype = { preload: function() { let logo = this.add.sprite(this.game.world.centerX -120, this.game.world.centerY - 100, 'logo').scale.setTo(scaleRatio, scaleRatio); let bar = this.add.sprite(this.game.world.centerX-300,this.game.world.centerY, 'bar'); bar.scale.setTo(scaleRatio, scaleRatio); //without next line loading sprite looks good, not cropped this.load.setPreloadSprite(bar); this.load.image('background', 'assets/Resources/BG/bm_bg.png'); this.load.image('ground', 'assets/Resources/BG/bm_ground.png'); this.load.image('icon_thor', 'assets/Resources/UI/icon_thor_odinson.png'); this.load.image('icon_loki', 'assets/Resources/UI/icon_upgrade_loki.png'); }, create: function() { this.state.start('Game'); } }; this.load.setPreloadSprite(bar) sprite looks good. After using bar.scale.setTo it becomes like: This is my code, i am gonna to create loadind scene but i have a problem with loading bar. This was too big, and when i try to scale it becomes cropped as on the screenshots. Give me the hint please how to repair it.

const atlasData = { // some data... } this.load.atlas("one", "one.png", atlasData); this.load.atlas("two", "two.png", atlasData); gets this error: File.js:557 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. at Function.File.createObjectURL (File.js:557) at ImageFile.onProcess (ImageFile.js:142) at LoaderPlugin.nextFile (LoaderPlugin.js:827) at ImageFile.onLoad (File.js:328) deleting either line works perfectly fine

Hello, I'm trying to make a mobile version of a game. The game has lots of code and javascript files that I preload (I have a bootstrap file, that load the splash screen and preloader). I load the scripts like this: game.load.script('preload', 'Preload.js'); It works perfectly on the browser and with the Webview mode in Cocoon, but when I try to use Canvas+, I get an error when I try using the contents of "Preload.js". Not even a problem when trying to load it, so I don't even know why it's happening. Does anyone know what it could be? I would like to use Canvas+, since the webview is a bit slow. Thank you!

I am wondering how to create a title/loading scene, ideally with.... A % downloaded progress bar B that also if possible preloads all assets for all scenes if possible? Any ideas/examples?

Hello, If there is an existing scene - is it possible to pre-import meshes without starting rendering them (something like isEnabled = false from the beginning)? For example, I would like to be able to load mesh from a *.babylon file into memory. So later, when/if I need it, I just call mesh.setEnabled(true) to make it visible. If I do normal importMesh() - drawing a mesh first and then erasing it feels a little hacky, so I'm interested whether there is a cleaner way?! Thanks!

If I have multiple states (say, 30) that are somewhat resource heavy (audio, background graphic, graphics), is it better to run a single preloader at the start and preload everything I'm going to need in the game, or preload the next state ahead in each state? So if I'm in a room, and can travel to 3 other rooms from my current room, should I be preloading those 3 rooms in my current state while the player is there, etc. or preloading them all in advance?

I am making a level viewer for a game using phaser, I loop through a large array representing the game grid and take the item names from the game save and place them in my phaser world in a loop. I take whatever the game name for the item is and map it to a phaser image, my issue is that I don't want to map every possible item type to an image, if phaser askes for an image that i have not loaded, can I just ignore it without the green texture being plastered over it?

Hi all, currently I got 2 state stateA assetsA stateB assetsB I want to load assetsB after stateA create completed, so when I go to stateB the preload flow can be faster even to 0. so I wrote like this in the end of stateA create part but I got some wranings this.game.load.audio('stateB1', 'assets/audio/stateB1.ogg'); this.game.load.start(); Phaser.Loader - active loading canceled / reset ----phaser-2.6.2.js:74076 and the assets are not loaded at all. so do you guys now how should I do to 【preload】assets for next state, thx

Happy new year everyone!!!!!! I'm starting this new Phaser year with a big question. Is there a way to do at least one of those three things: Have multiple keys for just one atlasJSONarray.json { "frames1": [ { "filename": "frame_x", "frame": {"x":0,"y":0,"w":246,"h":642}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":246,"h":642}, "sourceSize": {"w":246,"h":642} }, ... ], "frames2": [ { "filename": "frame_y", "frame": {"x":0,"y":0,"w":642,"h":246}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":642,"h":246}, "sourceSize": {"w":642,"h":246} }, ... ], "meta": { "app": "http://www.codeandweb.com/texturepacker", "version": "1.0", "image": "frames.png", "format": "RGBA8888", "size": {"w":1904,"h":1926}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:7501c1db9128f0a301bfd7fdbb041683:f12b9111dd99102df2878485c54440cc:8dfa5172c304a3afa731250a934e2d8d$" } } //Load things in "frames1" with key 'spriteframe1' game.load.atlasJSONArray('spriteframe1' , 'images/frames.png' , 'images/frames.json'); //Load things in "frames2" with key 'spriteframe2' game.load.atlasJSONArray('spriteframe2' , 'images/frames.png' , 'images/frames.json'); Loading multiple atlases in just one atlasJSONarray.json { "frames": [ { "filename": "frame_x", "frame": {"x":0,"y":0,"w":246,"h":642}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":246,"h":642}, "sourceSize": {"w":246,"h":642} }, { "filename": "frame_y", "frame": {"x":0,"y":0,"w":642,"h":246}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":642,"h":246}, "sourceSize": {"w":642,"h":246} }, ... ], "meta": { "app": "http://www.codeandweb.com/texturepacker", "version": "1.0", "images": ["frames1.png", "frames2.png"], "format": "RGBA8888", "size": {"w":1904,"h":1926}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:7501c1db9128f0a301bfd7fdbb041683:f12b9111dd99102df2878485c54440cc:8dfa5172c304a3afa731250a934e2d8d$" } } Have the same key for two different atlases who have data for the same sprite/sequence/animation/any //Load all the frames in both files for my animation game.load.atlasJSONArray('spriteframes' , 'images/frames1.png' , 'images/frames1.json'); game.load.atlasJSONArray('spriteframes' , 'images/frames2.png' , 'images/frames2.json'); Is it possibile at least one of this three things? If yes, how? Thanks for the answers guys!

Good morning! I've a (really probably) noob question. I have to preload all the file in one folder and its subfolder. If I know before the upload all the stuff stored in these folders I can easly do it with game.load.images([keys], [urls?]); or game.load.pack(key, url?, data?, callbackContext?); but if I don't want to edit multiple times the string or json file (in example to have the same code valid for multiple projects or if I have some stuff now and in the future a lot more), there is a way to do it? I've google for a while finding nothing for Phaser, nor Typescript nor JavaScript. Thanks to whoever can help me! :-)

Is it possible to show the loading progress of a png sptire atlas and its json file? Something like we used to do in flash with totalBytes and loadedBytes?

I have a code like this: fonts.css @font-face{ font-family: 'LiberationMono'; src: url('../fonts/LiberationMono-Regular-webfont.eot'); src: url('../fonts/LiberationMono-Regular-webfont.eot?iefix') format('eot'), url('../fonts/LiberationMono-Regular-webfont.woff') format('woff'), url('../fonts/LiberationMono-Regular-webfont.ttf') format('truetype'), url('../fonts/LiberationMono-Regular-webfont.svg#webfont') format('svg'); } @font-face { font-family: 'archivoblackregular'; src: url('../fonts/archivoblack-regular-webfont.woff2') format('woff2'), url('../fonts/archivoblack-regular-webfont.woff') format('woff'), url('../fonts/ArchivoBlack-Regular.ttf') format('truetype'); } fonts = "30pt LiberationMono"; fontTitles = "50pt archivoblackregular"; ... text = this.game.add.text(this.game.world.centerX, 130, "¿What option is the correct?", { font: fontTitles, fill: "#005ba6", align: "center" }); text.anchor.set(0.5) But in the first round does not work. I have thought to use this as it says in https://hacks.mozilla.org/2016/06/webfont-preloading-for-html5-games/ var fontLoaded = false; var gameCreated = false; function createText() { if (!fontLoaded || !gameCreated) return; game.add.text(0, 0, 'Lorem ipsum', { font: '12px Amatica SC', fill: '#fff' }); } function preload() { let font = new FontFaceObserver('Amatica SC'); font.load().then(function () { fontLoaded = true; createText(); }); } function create() { gameCreated = true; createText(); } But it's a lot of code change, since my games are all with text. Thanks in advance.

In many examples and tutorials, there is usually one "must have" state: Preload state. There also discussion on preload state: Do we need load all assets files in preload state? BTW, I found if I load a sprite sheet from an image file in preload state, and add to game in my main state, sometimes it fails to slice my sprite sheet into each frames. Recently I load an image sprite sheet file for buttons in preload state, and add to my title state, I got the whole image show on the screen, regardless what I set frame width and height in load function in preload state. Then I put this load into the preload function of title state, it worked well. So. this made me more confused. Is this a bug? Or there are some rules for file loading? If we can't load many assets in preload state, why we need it?

Is there a way to know if all the materials that have been created in a scene are done rendering without continually querying all the materials to find out if they are ready(material.isReady)? I am using several PBR materials and I have a screen that covers the scene until all the meshes are loaded, but I want to keep the scene from popping in materials after the screen is gone. Here is what I am working on for an example http://protest.jht.com/gea_engines101_new/ Thanks in advance

Hi all, I wonder whether it would be possible to load an asset dynamically at a given time in Phaser rather than loading everything in the preload function. The reason for this is simple: I have a game with three different levels, all of which have different background songs; and so I'd rather only load a single song at startup to reduce loading times. Right now, my preload function looks like this: preload: function(){ game.load.audio('pixel_world', ['assets/music/pixel_world_lo.ogg', 'assets/music/pixel_world_lo.mp3']); game.load.audio('second_source', ['assets/music/second_source_lo.ogg', 'assets/music/second_source_lo.mp3']); game.load.audio('reboot_complete', ['assets/music/reboot_complete_lo.ogg', 'assets/music/reboot_complete_lo.mp3']); game.load.image('pickup', 'assets/img/pickup.png');}I tried moving one of the game.load.audio() calls to the create function instead: create: function(){ game.load.audio('pixel_world', ['assets/music/pixel_world_lo.ogg', 'assets/music/pixel_world_lo.mp3']); // good things follow...}However, the following calls fail: this.cache.isSoundDecoded(level.song)// Phaser.Cache.isSoundDecoded: Key "pixel_world" not found in Cache.song = game.add.audio(level.song);// Phaser.Cache.getSound: Key "pixel_world" not found in Cache.Do you know how I can get this to work, or any other way to ensure that the three songs are not loaded at game startup? Thank you!

How can i control the initilization of the game, i know that the first that phaser do is the preload function but i want to execute some Js code and till that part is finished start the game. Help please

I am making a game with skins in it. When ever player changes a skin Images gets loaded again. I use this code. preload: function () { this.load.image('arm', 'asset/Theme'+this.theme+'/arm.png'); this.load.image('leg', 'asset/Theme'+this.theme+'/leg.png'); this.load.image('head', 'asset/Theme'+this.theme+'/head.png'); this.load.image('torso', 'asset/Theme'+this.theme+'/torso.png'); } gameFunction:function() { if(this.themeChanged) { this.theme = this.newTheme; game.lockRender = true; game.load.onLoadComplete.add(this.preloadComplete, this); this.preload(); game.load.start(); } } preloadComplete:function() { game.load.onLoadComplete.remove(this.preloadComplete, this); game.lockRender = false; this.addImages(); }, This gives me an error What am I doing wrong here?

Hello, probably I have a very simple (and stupid?) question. When I load some sprite atlases in my preload function are they downloaded from the server when the preload is executed (and then loaded to memory), or during preload loop they are only loaded to device memory because they were downloaded earlier (before game.load function)? I need to optimise my game to download assets on many loading screens, not all at once. I did some googling but didn't find anything about downloading assets Any advice, links appreciated - thanks

I get a error when I use game.state.start() function in phaser.min.js 2.4.6. I want back to previous state(in my code ,it is "Main" state) with a button tap function in "Play" state.so I use the code:game.state.start("Main").but there throw a error:Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'. It seems like that the preload function in "Main" state been called again,because the game run well when I replace the code to : game.state.start("Main",true,true).In fact ,I must keep the game.Cache in game ,so the gamer woudn't wait for a long time. Who can help me?Thanks to any replies!

I have a custom Preloader which has been working fine, but now when i try to preload a 8.43 MB mp4 WebOptimized video (made with HandBrake) my preloader breaks with the message: Phaser.Loader - active loading canceled / reset If I remove the video the preloader loads fine OR if I clear the cache file of the video (on the browser) it also loads fine! When the loading breaks I get the 304 Not Modified status code for the video. What could be causing this?