• Content Count

  • Joined

  • Last visited

Everything posted by megmut

  1. megmut

    Box2D examples

    @Mat Groves A long time since this was posted I know, but I accessed this link fairly recently but it's broken now. You don't happen to have an old copy on a floppy drive somewhere do you?! Cheers!
  2. I don't know if you are aware of this, but there is a plugin on PIXI. The namespace is PIXI.prepare, and the method, upload. I use this sometimes when preparing states and making sure all the assets are correctly on the GPU memory. You can see more here as well as an example:
  3. megmut

    Inverse Masking

    @ivan.popelyshev thanks for the quick response. I took a look into the Stencil Manager and will try this route for a while. I'm assuming that with the workaround, it applies only to primitives shapes, or would graduated alpha's work also? I do have another quick question relating to this one, if I try to manually reduce the pixel alpha when an inverse mask is applied, how would I go about getting the pixel data, re calculating it and then uploading? My guess would be to get both textures, and extract the pixel data using the extract function on the renderer.. then subtract the inverse mask from the texture pixel data, then re-create the texture and apply it. Is there anyway to manipulate the texture without re-uploading it to the GPU or is this not possible? I'm reaching a little beyond my understanding of how the GPU caches textures, and in what format.. an area I think I'll be learning more shortly! Thanks
  4. megmut

    Inverse Masking

    Hey guys, I've trawled through google, here and the github repo but couldn't find a good way to perform an inverse mask. I need the mask to be applied on every rAF, so generating a new canvas and re-uploading the texture to the GPU and rendering is going to be to expensive I think. I've read that this is very easy to do in WebGL, but I would like to keep canvas fallback if possible. I already have a mask texture that I want to apply, but obviously it's being used as a normal mask. Are there any good performant solutions for this?
  5. I have gone through the git repo and the documentation and I can't see anything. All that seems to be available is a 'done' callback on the upload function. That being said, if you extend the prepare class, and in the constructor, pass an event / signal.. you could add it to line 155 of Then, every time an uploaded item is pushed to the completes array, your event will fire.. and you could pass a parameter of 'this.completes.length / this.queue.length * 100'. This would give you a percentage of the prepare completion. Just a thought
  6. @voidmen you are correct. Pixi generates a new canvas, and passes the source SVG along with it's bound box found in the SVG xml. you can see how it's doing it here:
  7. I have used the builtin tool to screen grab with osx (cmd + shift + 3), however it's actually perfectly crisp..
  8. Thanks for the link, was a good read, though nobody seemed to have a solid answer except for hardware and browser differences. Will look deeper into this. Thanks!!
  9. yes, I thought this might be the case. I'm not sure if the browser is doing it's own interpolation or something. Any suggestions?
  10. You can change the initial velocity in the fiddle on line 8. I've noticed that most html5 games do this now I've started looking, but there hasn't been a resolution or even any good explanation as to why, even if it's not fixable, I'd like to know why this is an issue.
  11. Here is a jsfiddle I made showing the blur. At least, it is on my screen anyway.
  12. I've already tried manually using Math.round(x). Didn't help. I've also just tried swapping the render order, so it renders a frame behind, but this didn't work either. I've removed all resizing, as well as any stage / renderer resize. In addition, I've removed the device pixel ratio from the render options, so everything is basically back to basics.
  13. Pretty sure it's not the monitor. I'm using a 13.3 mac book pro and I've tested on other screens. 60 FPS and no frame drops, it doesn't budge from it. Thanks for suggestion rendering round pixels, however that didn't fix the issue. Literally all I'm doing is adding a sprite to the stage and rendering it. I've tried legacy rendering, forcing canvas / webgl, rounding the pixel values myself, removing all scaling, all anchoring. I swapped the sprite for a graphics texture and that didn't help. It's the same on my mobile phone too. I've also tried playing with the FPS, speed and other properties on the Ticker class. To that end, I'm running out of options. Most other PIXI games aren't giving me this issue, but for some reason, mine is I'll put together a demo for you guys to test. I'm not using any current timeStamp method, just using the deltaTime passed by the ticker on the ticker update.
  14. Hey guys, I'm experiencing some bad Ghosting. I can't take a screenshot because it's fine when ever I do it. But basically, when a sprite starts to move quickly (not uber fast), the trailing edge gets blurred. Any reasons why or how I could fix this? Thanks, Nick
  15. What do you mean 'look the same' Could you elaborate how they don't??
  16. In the main entry point to your application, you can import directly there. Install PIXI with NPM, npm install --save-dev pixi.js@4.5.1 Then, go into your 'main.js' / 'main.js' and add the following import * as PIXI from 'pixi.js'; // or // import {Sprite, Container, AutoDetectRenderer} from 'pixi.js'; // or // var PIXI = require('pixi.js'); Visual Studio Code 'SHOULD' pick up on the js maps from the dist folder in the pixi.js module.
  17. I think the best approach to do this, would be to use a customEvent. This would allow you to emit an event every 60 seconds, and like wise, any state can listen for that event regardless of scope. Thus reducing your binding to have scope of your game at all times. Below is an example. <head> <script> ajax stuff { success: function() { window.dispatchEvent(new CustomEvent('anim', { detail: null })); } } </script> </head> // inside any of your game states window.addEventListener('anim', function(e) { // do some animation things }); This will dispatch an event every time an ajax request is successful, and in side your game, we will listen for the same event to be triggered. CustomEvents are supported by every browser and device except for chrome on an old samsung and Internet explorer 9. So here is a polyfill you can use provided by the nice guys over at mozilla. Just paste this in the head of your html page and you will always have CustomEvents then (function () { if ( typeof window.CustomEvent === "function" ) return false; function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; } CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })(); Hope this helps.
  18. megmut


    There is a fork of the PIXI v3 branch - However, there is talk for it to be a major release in PIXI v5. You can read how the support is going on this post here -
  19. Yes, I have experienced this before. The way I handled it was by adjusting the pixel to meter by a ratio of 100. So when you create your fixtures, create the sizes at pixels * 100, then on the world step, update the texture positions by a factor of 100. There is a good example of this on this thread: however I don't know if the download link still works. here is an example of some of my calculations: this.bodyDef.position.Set(9, / 100 + 1);; ... this.circleFixture.shape.SetRadius(s / 2 / 100); body.CreateFixture(this.circleFixture); .. let position = body.GetPosition(); sprite.position.x = position.x * 100; sprite.position.y = position.y * 100; sprite.rotation = body.GetAngle(); .. let x = points[t * 2]; let y = points[t * 2 + 1]; vec.Set((x / 100) * 0.5, (y / 100) * 0.5); vecs[t] = vec; This code is taken out of context, so I don't expect anybody to understand what's going on, just an example of how I convert physics positions, to texture positions. Hope this helps!
  20. I would suggest that the easiest way is for you to fire an 'invisible' bullet and check if it ever collides with anything. You can dramatically speed up this bullet as long as it does not travel so fast that it passes through the physics body without registering a collision. I'm quite sure there are more performant ways like drawing a ray line and seeing if that gets intersected at any point between the enemy and the player. I hope this helps.
  21. 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.
  22. 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
  23. 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!
  24. 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.
  25. 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.