megmut

Members
  • Content count

    132
  • Joined

  • Last visited

2 Followers

About megmut

  • Rank
    Advanced Member
  • Birthday 10/01/1992

Contact Methods

  • Skype
    megmut

Profile Information

  • Gender
    Male
  • Location
    United Kingdom
  • Interests
    Programming, swimming, photography, music ... programming

Recent Profile Visitors

922 profile views
  1. Yes, that worked fine thanks @ivan.popelyshev There is little documentation on this, so for anybody coming across this.. renderer.plugins.prepare.upload(texture, () => { console.log('single texture complete'); } // multiple textures var textures = [texture1, texture2, texture3, texture4]; for(var i = 0; i < textures.length; i++) { if(i >= textures.length-1) { remderer.plugins.prepare.upload(textures[i], () => { console.log('last item has been uploaded'); }); } else { remderer.plugins.prepare.upload(textures[i]; } } // directly off the back of the resource loader loaderComplete(loader, resources) { let c:number = 0; for(let t in resources) { let texture = PIXI.Texture.fromImage(resources[t].name); if(c >= Object.keys(resources).length -1) { renderer.plugins.prepare.upload(texture, () => { console.log('preloading complete!') }); } else { renderer.plugins.prepare.upload(texture); } c++; } } I couldn't see any documentation on preparing assets directly from the preloader without creating a texture from each one, and using the resource name to make a reference to the texture in cache.
  2. Hey, thanks for the response. It is making an XHR with the PIXI Loader, and it already exists in the cache. I was checking to see if it was making a second when the texture is called and it is not. Thanks for the info on the pixi prepare, I will take a look at that now
  3. Hey guys.. I have a quick question. So I'm preloading a background texture right, roughly 960 x 540, so not huge in the grand scheme of things. The preloader has finished loading it, and it definitely exists in the cache, however when ever I do this... let bg = new PIXI.Sprite(PIXI.Texture.fromImage('myBG.png')); stage.addChild(bg); It takes a fair while to actually add it to the stage. I've watched the network to see if it IS making another xhr request to get the same image, and it's not Are there any suggestions if I'm doing something wrong? Should I make a custom cache and create all the textures first so I don't have to wait for PIXI.Texture.fromImage to hunt through the texture cache and make it? Cheers!
  4. If the path is not closed, then there is no theoretical bounds. If there is no bounds, then you can't perform a hit test, thus you don't know when it's being clicked. Without seeing any code, or an example demo.. I think I would suggest drawing rectangles along your path, above your graphics, and making it alpha 0; Then you can use these events to manipulate your graphics in what ever way you are doing. Alternatively, you could always use a mask. So close off your graphics, use the input there, but apply a mask to it doesn't look like it's closed? Not sure if it will work but again with no screenshot, little to go on. Or, if you wanted to write something more complex, but flexible.. you could just make the entire container interactive, and listen on the mouse / touch events. then get the global positions and manually calculate what the user is doing and use this to interact with your path. Not sure if this helps, but hopefully it's in the right direction.
  5. This is actually pretty easy to do. You can either create all your assets with that perspective in mind.. Or, you could skew your entire container. So as a state extends a group (formally a container), then you have access to a method called updateTransform. You can override this and warp the entire container, than thus every child of it. There have been a few discussions on this before, though I haven't seen any working code yet.
  6. Okay, thanks! I've gone and created a new issue https://github.com/pixijs/pixi.js/issues/3813 p.s, I'm blown away by the SVG support, hats off to all the guys that worked on this
  7. Incase anybody wan't to see a live example, here: https://jsfiddle.net/gmg4uyxx/
  8. Hey guys.. I'm hoping this is something I'm doing wrong, but basically.. when I'm creating a new SVG, it's having width, and height of 1 until 1 frame has passed and then it has actual dimensions. My guess is that the onTextureChange event is being triggered, however the new local transformation isn't happening until the next loop takes place. Here is an example of my code: var texture = PIXI.Texture.fromImage('mySVGPath.svg'); var sprite = new PIXI.Sprite(texture); console.log(sprite.width, sprite.height) // 1, 1 setTimeout(() => { console.log(sprite.width, sprite.height) // 500, 465 }, 0); Is there a way of solving this? Thanks!
  9. Yes and no.. it wouldn't really increase GPU calls because everything gets called from the GPU anyway. your issue is taking up GPU memory, and on older devices it is an issue. I think it's more a game by game basis where you need to decide what your target devices are and having 60fps on 85% of modern devices, is better than having 50fps on all devices and clunky unscalable code. End of the day, in 18 months time, tech will have roughly doubled in performance and cpu / gpu power.. so unless you're ready to release your game today, then that should be factored in anyway. I don't know if you are, but you can create a texture map cache in the boot / preload phaser of your game. For things like arrows and zombies, you can add a reference flag to the texture in the preloaded resources obejct, and store it either as a hashed map or a data dictionary. This means you won't have to do lookups in the cache which speeds things up. you just grab an instance of that texture and use it directly. When you use the from image, the baseTexture will go through all of the caches searching for the texture, before making an xhr request to a web server for it.
  10. Hey guys, here's my first post. I made this game around a year ago in 2 days as a demo for someone. The game is the classic old connect 4 game you'd play with siblings in long car rides. It features score keeping, two player mode and an AI that you can play against. Any feedback is greatly appreciated https://sprite-storm.com/game/connect-4/ P.S There is also a link to the github repo on the page above.
  11. Graphicriver have a great range of graphics for some very good prices. Here is an example of one. https://graphicriver.net/item/jump-game-kits/9998158?s_rank=20 You can also try and get some artists to make some custom assets for you at fiverr.com. Another example here https://www.fiverr.com/zeeshan719/design-game-ui-for-you?context=advanced_search&context_type=auto&context_referrer=search_gigs&ref_ctx_id=e7411688-cd29-42b1-a343-2872526fd356&pckg_id=1&pos=17&funnel=45cc7db8-0089-4645-9bbf-3a5a5d61a48d there are plenty of free artwork websites available, such as http://opengameart.org/ which are usually royalty free. Hope this helps
  12. With regards to the performance issues in PIXI. What you are saying is correct, however there are ways around this. You can actually run two instances of PIXI (background / foreground) and you can set the fps on the background to lower of the foreground. You can also set things like 'clearBeforeRender' to false and preserveDrawingBuffer to true. These I found were some performance gains. You can also create fresh textures out of nested containers and set the cache as bitmap as true until they need to be redrawn and their transformation matrix updated. I hope any of this is help to you
  13. Ah okay, thanks! I've been playing around with a simple particle emitter because, why not.. and I've got it to roughly 30k with multiple textures still at 60fps. I crated some simple pooling and lightweight gravity and velocity "physics". Thanks for the response
  14. It depends on your requirements. As far as I know, the reason the devs at PIXI left scaling out, is because it really does belong in User-Land, that is it's almost impossible to build a scaling method that fits for 100% of users, devices, rotations, DPR's etc etc. It's really not that hard to implement, at least the way I do it. Break it down into the following: 1. Take care of DPR (shrink stage / canvas by a multiplying factor of window.devicePixelRatio) 2. Calculate differential in scale between art design and current window.innerHeight / window.availHeight / window.clientHeight and apply the smaller of the two point values, the x or the y. 3. Listen out for resize events or device orientation. I tend not to listen for both and calculate the inner width / height as some browsers won't report a device orientation change but rather as a resize. And that's all there is too it. Your stage, and all of it's children will scale to fit correctly. Do not get confused with the way that Phaser does this. Whilst it's very easy to setup, it also causes some issues issues when trying to fit 100% x 100% because of things like the letterbox. It's probably also worth mentioning, that all SVG's and Graphics generated in PIXI take into account of things like DPR. And the resource loader will attempt to load the 2x, 3x etc assets if they are prefixed with this. (mySuperAwesomeSprite@2x.png)
  15. Hey guys, just a really quick question on containers. I see that you can use a PIXI.particles.ParticleContainer. In the documentation is says that it doesn't support features such as tinting, alpha, masking etc.. However, as this class is extending from the normal Container, I am curious as to what is different, and how it achieves this. Thanks, Nick