Search the Community

link to recurrence i set different size Rectangle to cut image, but it looks identical how to fix it ? pixijs v7.0.5

Alright. So I've re-sized all my assets for different resolutions but I was wondering if there is a "right way" of packaging everything together to make for fast loading (not that it's currently slow) but also efficiency. I have heard of people doing things like making Texture Atlases for all their sprites and assets but I was wondering roughly how long it takes to learn something like that and implement it? Does a lot of the code change for the way things are loaded? Unfortunately there is only one day left on this project so I don't want to take on a task that's too large. Any help is greatly appreciated! Edit: I am using CocoonJS to package everything up and run on Android.

I'm trying to work out how to log asset byte sizes after load. e.g. something like this: PIXI.Loader.shared.add("bg", "img/bg.png") .on("progress", loadProgressHandler); function loadProgressHandler(loader, resource) { console.log(resource.size); } This possible?

Hi, I'm hoping you can share some ideas with me! I'm making web based games with Pixi.js and I'm having a bit of a hard time working with the graphics design team (this is not a developers vs designers issue!). I'm trying to find the best workflow that might help us both do our jobs faster, but I can't seem to find the right tool for it! The designers sketch and build the app in Photoshop, and I work in Typescript with Pixi. So... what we've tried so far was: they sketch up in PS and then generate all assets with TexturePacker, leaving me with a json file which I can easily import into my game. The downside of this is that I have to position every asset and create every container manually (or rather using a config file, but still that's kinda manual work). Our second attempt was that they sketch up in PS, then export that to Adobe Animate, and using the PixiAnimate plugin, they then create the files for me to use. This has improved our workflow, because I don't need to position anything nor create the containers, but there are still some flaws as they are not able to test interactive elements (they can't see how a button actually reacts unless I implement it), and I would love to not depend on Animate which seems fairly deprecated nowadays, and on an external plugin which is out of our control. Plus, designers (at least ours) do not think as programmers, and they don't make variable names easy for us. PixiAnimate creates objects using the instance name they put on Animate, but they don't follow any guidelines. If they have four items of the same group, they call them "item_1", "item2", "this_is_the_third_item", and "last_one". If there's a tool that can validate this prior to exporting (setting some kind of rules, like prefixes for elements), that would be awesome. So yeah, I'm asking for a magical tool. I know it doesn't exists, and I know some adjustments are necessary on both sides, but I'd love to hear from you guys, how do you work with your graphics team, what do they use and how do they deliver the assets to you! Thanks!

I've been struggling to find a bit of paid work lately, so I have been working on a set of assets that I intend on packing up into an asset pack, the character is in the style of a project that I am currently working on in Phaser 3 titled: "Karzak The Slayer" where you play as a barbarian that has had his victory feast stolen by some mischievous goblins. The tile are nothing alike that project's tiles but any way, I was hoping to supplement the income I have from the days or work I find labouring here and there or odd contracts and this was the best way I could come up with. I started thee project when I was homeless which wasn't too long ago, and a friendly donation from a member of a game development community helped me out of that situation, where I am now under a roof and attempting to get things back up and running, struggling to find work is quite stressful and having my laptop stolen recently, I lost much of the work I would have used for my portfolio, so I decided to start this as a new portfolio piece and as a potential trickle of funds that I would divert to things like my Karzak project IF it gets anywhere. I started this post because I don't quite know of anywhere to post about it, collect feedback or opinions and the like, being an artist I struggle to think of what a programmer or non-creative would consider when looking for a pack of assets for use in any kind of development. I have tried many places like the itch.io devlogs, facebook and other sources to attempt to get some feedback, but people just like or share and rarely read the posts on facebook, which doesn't help when you're seeking information! So if any of you have some time (I apologize in advance if this isn't a good place for this kind of post) I do have some questions not only regarding where would be best for this kind of discussion but about the pack itself (I will share links below) To consider purchasing an asset pack, what do you consider essential? When looking at a character's animation set for a project's prototype asset or final asset, what animations are rarely there when you're developing your prototypes and have bought an asset to use? Do you prefer to get a whole set of assets intended to be used together or do you mix and match? ... I do have more questions but I have a doctors appointment that I cannot miss and time is getting on, I will add more later. Asset Pack Previews: Album link - https://imgur.com/a/r4qs6Dy The above link contains animation previews of both the character and a handful of the enemies, UI previews and some basic tiles I've made. All of the tiles are at 16x16. Monkey Boy Character Asset: I genuinely struggled when it came to the character, I had no idea of what to create, my mind was completely blank, but I didn't want to sit around doing nothing and I hit a creative block in the level design for my project Karzak, so I felt that I needed a little break... Anyway, a random thought came to me about Monkeys and so I decided to make a Monkey-like-Man or as it turned out, boy, and that's how the character was spawned into existence. The style of Karzak was well received and that was just with the prototype art so I decided to use a similar style with these assets and I hope that is instilled in the character, these previews above are not finished though and will get a lot of polish before they are released, but that style will remain the same throughout. Hopefully you can tell that the run style is intended to be a man/boy mimicking a monkey's run. The animations that caused most issue where the jump which there isn't a preview for yet, and the death, I couldn't figure out how I wanted it to look, there will likely be multiple death animations eventually though as I intend on updating the pack a little even once the baseline set is polished and released. At first I wasn't quite sure about the character, I was really unsure in fact about how it looked but it grew on me and now I quite like it! The Snail Enemies: The idea is that these enemies would be able to transition to a vertical climb obstructing the player at times or causing the player to have to get hurt to avoid a greater or stronger enemy, but these blue ones can only move in one direction, whereas another coloured variant would be able to turn around and move the other way, following the direction of the player but sticking to whichever surface they are still on. There is intent on adding an enemy that does this but can hop to local tiles in pursuit of the player. There is a slime enemy that is not yet finished, A giant fish that leaps out of water to get to the player across certain deep water gaps, plant based enemies that are ranged and melee that can leap out of the background to strike the player based on many variations in mechanics or triggers. Conclusion: There is still a great deal of work left to finish on these assets, and it is at this point, taking some time away from my project Karzak, but I am having fun and hopefully it helps a little in the long run with supplementing a little trickle of funds towards it. In any event, it will help me update a new and fresh portfolio with some content that is consistent. I hope to get some feedback from potential users or people that have used assets in the past. -------------------------------------------------- Karzak The Slayer: Title Screen Logo - https://imgur.com/8jLPwa0 Character & Enemies - https://imgur.com/l8yYjHY Old Phaser 3 Demo Screenshot - https://imgur.com/S0fseQt Karzak Animations - https://imgur.com/wIcLPmz Updated Tiles (Style) - https://imgur.com/g4jROEN - https://imgur.com/ruoXbVn -------------------------------------------------- Random animation samples: Goblins - https://imgur.com/a/BwZS3 -------------------------------------------------- I hope you're all having a good day and developing some awesome projects! Kind Regards, Patrick.

I'm building my first Pixi game and working on basic services for asset management. My game should support few different resolution asset packs. Pixi handles this fine with resolution values and scaling. Next part I'm working on is to reload higher definition assets when required. Lets say that player starts game on 800x500 embedded window but presses full screen toggle. In this case I'd like to load HD assets on background and then replace the SD assets with newer ones once loading is ready. Before implementation I'd like to know if there is any existing mechanism in Pixi for this kind of operation? Or if not, should I know something specific about Pixi's texture handling to avoid some pitfalls? My current idea is as follows: When user moves to HD mode, trigger reloadAssets event, which kicks of my AssetLoader which loads the set of resources I require at the moment. Loader stores the names and textures to a map in AssetStorage -service. Once this is finished, an updateAssets event is broadcasted. Each Sprite can listen this event and they will update their texture from my AssetStorage -service. The reason I'm slightly insecure about my design is because I don't know exact inner workings of Pixi's resource management. For example does Pixi clear assets automatically, which might mess up my AssetStorage -service? What exactly I need to do when I reload new versions of assets especially regarding the old assets?BaseTexture seems to have update() function, can I sue it for this case? I'm reading about this stuff but decided to drop a question here since these are things I couldn't yet find any clear examples. Also, I'm afraid I'll implement something which is already done better in Pixi

Hi, would like to propose some possible improvements for AssetsManager there are multiple tasks that can be added to manager, but I think would be nice to have general `addTask(task: AbstractAssetTask)` so custom tasks could be created and added to manager if needed. right now response in onSuccess can be just string or ArrayBuffer but I think it would be great to get back request object so there would be more control what to do on success. minor but I didnt found way to add mime types to loader, but that can be fixed on server side as well, so server always serves files with proper mime type I came across this when was trying to implement svg file loader task to load svg as document. Was quick to implement task but could not add it to mananger and it needed request.responseXML so had no acces to it For now used text file tasks and parse string using DomParser. So what other think about this ? Thanks

Hey everyone I recently started trying to put my webapp made in Babylonjs and typescript into a Cordova android app. Before this I was just setting up a local server, this way I could load all of my assets easily. However when my app gets built for android it makes all of the assets go through this type of path file:///android_asset/www/Audio/ Which I don't believe Babylonjs can handle er something. Except some of the sound files load source: I can hear them but they still give the error. So I was wondering what the next best solution would be, but I don't have my own server to host these assets on, I was thinking GitHub maybe but I don't know how I would reference that in my code. The type of assets I have are babylon scenes, images, textures, and sound files so imgur won't work (I think). Im going to try the GitHub approach for now. They would need to be private so no one but me can see them but I also need them to be accessible to anyone who has the app so I'm kinda stumped about how to do it with that respect... Any ideas ? More details in these posts about my problems: Thanks have a beautiful time!

Hi team, I'm quite interested in the PandaEditor. However, I'm having some trouble using it. I'm using the latest version (Downloaded yesterday). Here's the assets tab: Now: How do I add more assets? I've tricked clicking, right clicking, ctrl+click, etc. So it seems that the asset view is just that.. a view? Or am I missing something? I want to either 1: Be able to select assets for editing. (opens with Editor of my choice). 2. I would be happy with at least being able to open the file explorer directly to the assets folder from PandaEditor. I had to open file explorer myself, and navigate out to the folder. Cheers!

I read in another thread that BabylonJS intelligently handles multiple uses of the one texture for optimal performance i.e. internally if the texture path is the same then no extra vram is used for subsequent new textures with the same path. I suspect I've been overcomplicating things up until now but here's some related questions. Question 1 If I load my textures with AssetsManager like so: var textureTask = assetsManager.addTextureTask("my-texture", "./path/to/my-texture.jpg"); Are the following methods of applying the textures equivalent behind the scenes (i.e. neither uses more VRAM)? // Method 1 textureTask.onSuccess = function(task) { material.diffuseTexture = task.texture; } // Method 2 - elsewhere in application after assetsManager.onFinish() has been called. material.diffuseTexture = new BABYLON.Texture("./path/to/my-texture.jpg", scene); Question 2 What I've been doing up until now is assigning loaded assets to an assets array which I then pass around to various objects to use what they need like so: textureTask.onSuccess = function(task) { assets[task.name] = task.texture; } // Stuff ... var myCustomObject = new CustomObject(assets); // In CustomObject ... material.diffuseTexture = assets["my-texture"].clone(); The reason for the .clone() is when I need different uv scale and offset per instance. If my method 1 and 2 are functionally equivalent and don't result in any additional vram usage or performance hit then I'm wasting my time passing around an array of loaded assets when I could simply instantiate a new texture with the same path that I know has already been loaded by AssetsManager. Can anyone shed some light on this? How do other people manage this efficiently?

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, Possible Bug in Assets Manager Audio. QUESTIONS: Is this a bug, is it related to M64 and M65, does anyone have any insight on M64 and M65? STEPS: 1) Run the Audio test (https://www.babylonjs-playground.com/#PCY1J#8) from these docs (https://doc.babylonjs.com/how_to/playing_sounds_and_music) and no audio. Reproduced in Dev environment. Along with interesting deprecation messages in the console. below... (maybe not related?): [Deprecation] GainNode.gain.value setter smoothing is deprecated and will be removed in M64, around January 2018. Please use setTargetAtTime() instead if smoothing is needed. See [Deprecation] AudioParam value setter will become equivalent to AudioParam.setValueAtTime() in M65, around March 2018 See https://webaudio.github.io/web-audio-api/#dom-audioparam-value for more details. Interesting. NOTE: Possible bug behavior seems limited to AssetsManager, as I can still use direct load sound and it works. QUESTIONS: Is this a bug, is it related to M64 and M65, does anyone have any insight on M64 and M65? ping @davrous ... : ) Thanks,

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

Hello World, I'm a pixel Artist and Game Designer sharing my work for the #gamedev sake. I just released a Free Public 2D Platform Pixel Art Pack for everyone. Check it out I even made an online Demo made with Phaser so you can see it in action: http://pixelgameart.org/demos/sunny-land/ Download this Pack at my site where I will be posting each month a Public Pixel Art Pack (code included): http://pixelgameart.org/web/portfolio/sunny-land/ Cheers and happy #gamedev

Hi, I'm open for new projects [email protected] My gallery: https://www.artstation.com/kozhko

Hey everyone I just have two simple question I cannot find an answer too. First Question: The SpriteManager needs a capacity parameter, but why does it need this? Why can I not change this during runtime? What does it actually do (in the background) (except for just not showing any sprites that exceed the capacity)? Does it hurt performance at all if I just put a 'crazy' high number? Can the manager not just +1 the capacity by itself in the background whenever an instance of the sprite is created? It just seems so odd that I have to give it a number and I feel like I'm missing something here. My second question is how to exactly use the AssetsManager for sprites. The documentation gives this example: var imageTask = assetsManager.addImageTask("image task", "img.jpg"); imageTask.onSuccess = function(task) { console.log(task.image.width); } But that doesn't explain how to use it with a Sprite since the task returns an image, and a SpriteManager only requires an image url. Thank you in advance!

Hello! Lirio Art Production can provide mainly high quality texture or 3D props from scratch to final output for your next-gen game. Please feel free to leave a comment here or directly message me regarding your project and estimates at [email protected]. - Texture Only: PBR Texture Tileable - $30/texture Included: Base Color or Albedo Map Normal Map Ambient Occlusion Roughness or Glossiness Map Metallic or Specular Map PBR Props texturing - $45/props/texture Included: Bake the sculpt to the game res Base Color or Albedo Map Normal Map Ambient Occlusion Roughness or Glossiness Map Metallic or Specular Map Substance Painter smart material [optional] - Asset sculpting, game res and texture: Basic Props [Flashlight, Cabinet, Chairs and Tables, etc.] - $150/props Included High resolution Sculpt Game Resolution Bake sculpt to game res PBR Textures [Base Color, Normal Map, AO, Roughness, Metallic]

Hello! Lirio Art Production can provide mainly high quality texture or 3D props from scratch to final output for your next game. All textures are set to 2048x2048. - Texture Only: PBR Texture Tileable - $30/texture Included: Base Color or Albedo Map Normal Map Ambient Occlusion Roughness or Glossiness Map Metallic or Specular Map PBR Props texturing - $45/props/texture Included: Bake the sculpt to the game res Base Color or Albedo Map Normal Map Ambient Occlusion Roughness or Glossiness Map Metallic or Specular Map - Asset sculpting, game res and texture: Basic Props [Flashlight, Cabinet, Chairs and Tables, etc.] - $150/props Included High resolution Sculpt Game Resolution Bake sculpt to game res PBR Textures [Base Color, Normal Map, AO, Roughness, Metallic]

Hello all! I'm currently making an isometric game using Phaser and the superb isometric plugin. However when it comes to creating assets I hit a wall. When searching online I don't really find something useful on best practice on creating isometric art but a few tutorials. If I want to a few characters - say same form, different clothes - in eight directions should I use a program life Inkscape and draw all of the different angles or should I create a 3D model and take pictures. I find the information on the topic very lacking. Thanks in advance for any answer! :-)

Okay, so a lot of the tutorials for Pixi.js seem a bit outdated. Most of the information out there still uses the old way of creating a new Pixi application by not using the newer 'convenient' Application class and setting up the renderer, container, and ticker by hand. A lot of the guides and articles also seem to be written before Pixi adopted and extended on a third-party loader module. Anyway, could someone explain to me how loading assets works, and what it means exactly? Normally, to start displaying some visuals with Pixi, you need to create a texture, and then a sprite from that texture, yes? Example: var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"]; var sprite = new PIXI.Sprite(texture); But then comes the 'loader' to the rescue. From my understanding, the Pixi loader is an object that simplifies handling assets because it creates the textures for you? For example: const loader = PIXI.loader .add('image1', '/assets/images/image1.png') Am I correct? I can't wrap my head around this. Here's my code altogether (it doesn't work by the way): const app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); const sprites = []; const loader = PIXI.loader .add('image1', 'assets/images/image1.png') .load(function(loader, resources) { sprites.image1 = new PIXI.Sprite(resources.image1.texture); init(); }); function init() { app.stage.addChild(sprites); } Do I need to render the stage in the 'init' function as well? Do I have to call 'load()' at some point? I'm so confused! However, this code works and I'm not sure why: const app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); document.body.appendChild(app.view); const loader = PIXI.loader; loader.add('image1', '/assets/images/image1.png'); loader.once('complete', function(loader, resources) { init(); }) loader.load(); function init() { let sprite1 = new PIXI.Sprite(PIXI.loader.resources.image1.texture); app.stage.addChild(sprite1); } EDIT Okay, it's making a lot more sense to me now. Here is the cleanest way I've come up with when using loader: const app = new PIXI.Application(800, 600); document.body.appendChild(app.view); const loader = PIXI.loader; loader .add('image1', '/assets/images/image1.png'); loader.on('complete', function(loader, resources) { let sprite1 = new PIXI.Sprite(loader.resources.image1.texture); app.stage.addChild(image1); }); loader.load();

What benefits importing assets in .babylon format has over .obj format? Which is better for performance, especially for loading very big high poly objects (for example, 100mb)?

Hi, I had trouble loading sounds and playing them directly at startup. I realised that the AssetManager calls the onFinish callback before loaded sounds _audioBuffer is set and are _readyToPlay. I dont know if it was a designed choice but it would be really useful either if the asset manager waited by default for the readytoplay flag to be set, or if there was an option to set when adding the job to the manager.

Hi, To make the preload faster, I need to load several assets after the preload phase, and use then when they has been loaded. To do that, I've used the Phaser.Loader object and register to "onFileComplete" Phaser.Signal to catch the file when has been loaded, to load the next file. This works well until I need to change the current state and there are an asset being loaded. When the file is loaded and the new state has been created, Phaser detects that the Loader is not loading (processLoadQueue method from Phaser.loader) and shows this message: 'Phaser.Loader - active loading canceled / reset', and the "onFileComplete" registered functions, are not fired, and I cannot continue loading more assets. My idea was to attach to "onStateChange" signal and stop/pause the current async download, but there are no public methods in Phaser.Loader to do that. Are there a good way to load assets asynchronously with state changes? Thanks

I have been looking over the forum and such and through various resources and decided to throw together some things for new comers and such. If you want to add to the list, just reply and I will get around to it. I will be adding more as I come across them as well. Legend [$] Must Purchase [/$] Purchase but has Trial Version [//$] Must Purchase if for commercial Assets SoundImage Books, Tutorials and Videos [$] Create a procedrual endless runner [$] Create a vertical endless runner [$] Discover Phaser [$] From null to full HTML5 [$] Interphase [$] Mobile Development [$] Scale Manager Guide [$] Tween Manager Guide Full Source Games Phaser Games Pack #1 Plugins Arcade Slopes by hexus [$] Box2D Premium by Photonstorm Grid Physics by crffty Island JS by luckylooke Isometric Plugin by lewster32 [$] Particle Storm by Photonstorm Phaser Animator by Kody Bentley Phaser Bones by silashatfield Phaser Inspector by netcell [//$]Registry Plugin by Phreaknation [$] Virtual Joystick by Photonstorm [$] Waveforms Path Editor by Photonstorm Tools Leshy SpriteSheet Tool by Leshy Labs [$] Phaser Editor [/$] Texture Packer

Hi everyone I'm currently running my own asset website where I post all my own work for developers such as yourselves to use in their games. The site's been going for over 18 months now and I've accumulated a good collection of assets already. The idea of the site is to produce useful assets at affordable prices. The site isn't just another asset store, it's kind of a personal thing and all the assets their are my own with the intention of maintaining a kind of continuity of style across all the assets I produce, although they have changed slightly over time as I've settled into a style. At the moment there is only one style of work on the site so I don't expect there to be something for everyone, but I'm trying to keep the art style universal and easy to replicate should people want to create their own assets that fit in with the style. I'd really love to hear your feed back on the site too. It is finished and fully operations but it's a work in progress and I'm continually improving it over time. I know a lot of indie developers produce games as a hobby without the expectation of turning a large profit from their work so I'm really trying to keep prices down. I also produce free assets which you can use freely in your commercial projects Which is partly why I'm writing this post, as I would like to share the free work I do with everyone who reads this and also generate interest in my asset collection. Here's the first free work I'd like to share with you all I'll post more stuff when it's completed. You can download the asset from the attachment to this post Here's a link to my asset collection website where you'll find more free assets: https://www.gamedeveloperstudio.com/graphics/ I've also included a preview image of the assets. donuts.zip