• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by themoonrat

  1. For basic things, it's always worth checking out the examples page:
  2. Some filters were moved from the core pixi to and
  3. And to calculate the global position of child display objects, you can use let globalPos = displayObject.toGlobal( displayObject.position );
  4. For something like moving and fading out over time, I prefer to use a tweening library to handle it for me; for example, with you could just do createjs.Tween.get( spaceship ).to( { alpha: 0 }, 250 ); To make it fade out over 250 milliseconds. For a pixellated look at the same time, you'll need the latest version of another lib called pixi-filters ( ). That page includes how a link of how to use a filter. The tween lib can work on the properties of the filter to make it more pixellated over the same amount of time as it fading out
  5. PS. If the above 'give it a wiggle after changing the default cursor' doesn't work, could you post a screenshot of what you are seeing as the default cursor? Got a hunch that a screenshot might help with Browser and OS would be useful too!
  6. For me, the default cursor style DOES change to a crosshair. Tested in Chrome, Firefox, IE11 and Edge. You do have to move the cursor after changing the default style to make the cursor use the new style. But that's the only caveat. I'm on Windows 10.
  7. I'm sorry, I'm not sure I understand. renderer.plugins.interaction.defaultCursorStyle = 'crosshair'; Changes the cursor to the crosshair by default, which works here and you say works. So far so good! What is it you want to happen from here that isn't happening?
  8. Something like renderer.plugins.interation I believe
  9. Set the anchor point on the x axis of the text to 0.5 for it to be centred. remember, the text gets converted to and drawn as a sprite, so by default if that sprite got bigger, it would extend from the top left. The align property is useful when you have text over multiple lines; then you'll see it work more as you'd expect
  10. Higher canvas resolution & higher text resolution, I'm afraid :/ So if you wanted everything at 960x540, instead have the renderer at 1920x1080, but load all assets at @0.5x Another options is change the libs so that text is created at a higher resolution by default. The code here: I change to always be higher than 1. I find that on a canvas of, say, 960x540, text created with a resolution of 1.5 looks nicer than 1, as it'll have some inbuilt scaling. YMMV
  11. If i were you, I'd look to use howler v2 than try to make your own thing
  12. A child will always be affected by it's parent. Position, scale, alpha.... any transformation. It makes sense; if you write your name on a piece of paper, then move the paper away from you, your name will look smaller. Your name hasn't actually changed in size, but the parent (the piece of paper) naturally effects it's children (your name). If you want 2 sprites to be 'together' but not be effected by each other, then create a new group and have that become the parent -
  13. @tips4design - I've found occasions where certain mobile devices report as supporting WebGL, but actually have a buggy implementation so need to be forced to use Canvas @selvam Using WebGL mode should not effect events. Increasing FPS is not something that can be helped without seeing the game code. Do a search on the forum and you'll find plenty of others who've asked more general tips on how to improve FPS; take a look and see what helps
  14. Your code should be prepared to use Auto by default, but maintain in your code a list of devices you force to use Canvas. These could be detected via user agent, browser api availability, screen size, dpi, os, etc etc. No other way around that, really.
  15. Yes, Linux has a case sensitive file system, so be careful with paths and filenames!
  16. There is no nice way, I'm afraid. The best thing to do is compare the window.innerHeight to $(window).height() If they are the same, then the url bar is hidden. If they are not the same, then the url bar is shown. In this case, put a large div overlaying the entire screen, giving it a lot of height. Have a message on the div instructing the player to 'swipe up to play'. This will simulate scrolling down the webpage, and in safari this will then hide the url bar. Once window.innerHeight matches $(window).height() again you can hide the overlay. Not fun, not sexy, but it's the only way :/
  17. When you set the width & height of a sprite, internally you are actually ARE changing it's scale. Thus, you have scaled the first bunny - and since the second bunny is a child of the first bunny, it will also get scaled.
  18. Indeed; after I've created my renderer I often create and add containers onto the parent, so I have my layers this._baseContainer = new PIXI.Container(); this._layers = {}; this._layers['game'] = new PIXI.Container(); this._layers['ui'] = new PIXI.Container(); this._layers['debug'] = new PIXI.Container(); baseContainer.addChild( this._layers['game'], this._layers['ui'], this._layers['debug'] ); I call render on the baseContainer, and then have an api of getLayer( layerName ) for other components to grab a container they can draw to.
  19. May or may not be related, but it seems others have had issues on some lower end Samsung devices with the WebGL renderer. For example:
  20. Are those 2 devices using WebGL or Canvas rendering? If they're using WebGL, does forcing to Canvas solve the issues?
  21. let graphic = new PIXI.Graphics(); // Make graphic however you want // renderer is what was returned when you first created the pixi renderer via 'let renderer = PIXI.autoDetectRenderer()' let texture = renderer.generateTexture( graphic);
  22. It all depends on what devices / browsers your customer is asking you to support. If you know your device list it's easier to make the call. For what I do, which is making games to be played in the browsers of mobile devices, canvas support is still required IMO. Older IE usage is significant enough that customers would prefer us to support them, players on older Galaxy devices just use the internet button so aren't running a modern Chrome, and Chrome itself has a blacklist of devices / graphical driver versions which it deems are buggy and cause too many issues when WebGL is used, even though theoretically they're capable. But the time to drop it is close. A year, maybe 2 max.
  23. PIXI becomes Internet Explorer exclusive.
  24. PIXI v4 has the ability to listen to interaction events globally as well as through display objects. For example: renderer.plugins.interaction.on( 'mousedown', function() { console.log('mousedown') } );