• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by themoonrat

  1. So the rational behind the browser vendors is that a touchstart could be the start of scrolling the page, rather than interacting on screen. They want certain api's to be unlocked on a guaranteed 'user has touched the screen for the sake of trying to press something'. By using 'touchend', what they can do is only unlock the api if there is a touchstart following by a touchend. If there is a touchstart, then some scrolling, then a touchend, then they know not to unlock the api's on the touchend; the user was scrolling, not interacting. (Apple changing unlocking audio from touchstart to touchend from ios9 to ios10 caused us to have to re-release all of our games to get sound working again. grrrrrr)
  2. Try fullscreenbutton.on('click', function(e){ fullscreen(); } Looked at my code for this and indeed it seems click is the only event that works for full screen api across android and windows phones. Well, actually, my code sets up listeners for both touchend and click, but not sure if that was overkill on my part or attempting to pre-empt a future browser manufacturer decision!
  3. Despite adding support for pointer events in the latest Chrome... they haven't made them act as a user event that can unlock other apis, like webaudio and fullscreen. To unlock these APIs, you'll need to explicitly use 'touchstart'
  4. Indeed, RequestAnimationFrame will stop when the the browser things it's not worth rendering anything to the window because it's minimized. There is however the Page Visibility API to detect this event ( - This could be useful to pause sounds when you know the game has become not visible, or to put up a pause menu if you wish
  6. No. You'll have to implement those yourself via tweening the alpha property of containers.
  7. Ok, there's a couple of crazy things there In input.js, you are joining the pointerdown and pointerup event EVERY FRAME. You only join the event once. In initialize.js, the function you are passing does not exist in that file scope Button[index].on( 'pointerdown', onClickButton(index) ); The way you use the function callback also won't work. You need to supply a reference to a function, or an anonymous function, as that parameter. You are actually trying to call that function there and then
  8. Use a breakpoint and look within the event object after adding a pointermove event renderer.plugins.interaction.on( 'pointermove', ( event ) => { console.log( event ) } ); All the info you need is in there
  9. renderer.plugins.interaction.on( 'pointerdown', ( event ) => { console.log( event ) } );
  10. Take a look at the examples page which demonstrates usage
  11. There is a big performance advantage to have as few images loaded and used as possible. Therefore games tend to use 'sprite/texture atlases', in which lots of individual images are combined into one big one. Then the libs can use the json data to work out which part of that big image contains the smaller image needed to be displayed. Don't worry, it's not hand done, there are lots of tools to generate this all for you, like TexturePacker. Pixi can use the json format exported by that tool natively.
  12. Check the official pixi wiki page on github: Most specifically: The main thing tho; profile profile profile! Use Google Chrome profiler to see where performance is being lost. It's very very hard answer questions of performance in an online forum because every game and every scene is different. Only you can find out where things are slow by using the tools available
  13. @JeZxLee you are using an old version of PIXI, v4.0.0. This issue does not exist in the latest version, 4.5.3
  14. The refresh rate is the monitor will effect fps.... the browser may decide to not send a new requestAnimationFrame if the monitor won't be refreshing to display any changes
  15. The documented setting for forcing the canvas renderer works when creating a pixi application or auto detect renderer. If it's not working for you, you're not using the setting correctly!
  16. Just google "Why is WebGL faster than Canvas" WebGL gives PIXI direct access to the GPU, and as such it can choose how to batch up certain commands for the GPU to run in an efficient manner. A simple example being, if you are drawing the same sprite over and over, you don't need to keep telling the GPU the details of the sprite every time, you just say here's your current texture, now draw here, here, here, here and here. Therefore WebGL is very very quick at drawing the same texture multiple times at once. Other tricks like masking and filters can be done totally on the GPU too. The Canvas API does not give you direct access to the GPU. You are using a general purpose simple API provided by the browser; every command you make will use some CPU to use this API, and it cannot optimize how to send the draw commands to the GPU. In the above example, each draw call is it's own thing; the batching up of super fast drawing of the same texture cannot occur. In a large generalization, the way to get performance up in the Canvas renderer is to make less draw calls. So, your game WILL ALWAYS be slower in Canvas renderer than WebGL renderer, and there's nothing you can do about that. It's not unreasonable to have a 2 code paths on occasions, one for clients using WebGL, and one for using Canvas. The WebGL version has all the bells and whistles and is the actual true vision of the game. Canvas mode (for me at least) is 'let the player play and experience the game', which comes at the cost of lower resolution textures, lower resolution game, less (or no) fancy effects. Other io games are doing this because they're written their games to perform well on the Canvas renderer. It's like making a game for a console. If you write a game targetted at a PS4, then run it on a PS3, then it's not going to perform well. You often have to tweak the game vision to match the hardware you are targetting.
  17. Use the prepare plugin to upload the textures to the gpu before you wish to show them (ideally include this within your loading process)
  18. I find that if I open 2 games side by side, requestAnimationFrame itself only fires 30 times a second on each tab rather than the usual 60, even though my PC could easily handle both at 60. The browser itself throttles how often it sends requestAnimationFrame and there's nothing you can do to stop that. I would record a time before and after you call renderer.render( stage ), and see how much time in ms each render is taking. Also measure how long between each requestionAnimationFrame request has come in. Here you can compared the difference. If the render time is only 2 ms, but there's 33ms between rAF calls, then it's not your game that is causing the lower frame rate. If your game render time takes 20ms, then you are over budget for a 60fps game and thus you have optimisations to do
  19. Indeed. I personally keep a count of how many textures I've passed to prepare, then count how many callbacks I've received when they've done, voila a percentage.
  20. Pretty much slot game on sky vegas or any other website played on an ios device will have this 'swipe up to play' mechanism. You detect to 'stop' by looking at the window.innerHeight compared to the window.screen.height.
  21. Indeed, the only way is to simulate scrolling down the webpage, as ios safari lessens the top bar in that scenario. To simulate scrolling down the webpage, you need to put an overlay div on top of your game, that is taller than your game, to give enough height to scroll down.
  22. For tweening: (I have my own fork on github I use which adds promises and various bug fixes) For particles: with it's amazing editor Extra WebGL filters: And easy enough to integrate to a pixi workflow, the best lib for sound, imo:
  23. You want to use the prepare plugin in pixi renderer.plugins.prepare.upload() You can pass through a sprite, texture, base texture etc. and it will upload any base textures to the gpu, so when it comes to be used there is no minor decoding lag
  24. You need to pass in the context to use in the third parameter for event listeners. this.sprite.on('mousedown', this.onClick, this);