themoonrat

Members
  • Content Count

    264
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by themoonrat

  1. 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!
  2. 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.
  3. Use the prepare plugin to upload the textures to the gpu before you wish to show them (ideally include this within your loading process)
  4. 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
  5. 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.
  6. 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.
  7. 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.
  8. For tweening: https://github.com/Nazariglez/pixi-tween (I have my own fork on github I use which adds promises and various bug fixes) For particles: https://github.com/pixijs/pixi-particles with it's amazing editor https://github.com/pixijs/pixi-particles-editor Extra WebGL filters: https://github.com/pixijs/pixi-filters And easy enough to integrate to a pixi workflow, the best lib for sound, imo: https://github.com/goldfire/howler.js
  9. 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
  10. You need to pass in the context to use in the third parameter for event listeners. this.sprite.on('mousedown', this.onClick, this);
  11. The ticker uses requestAnimationFrame in the background. Internally, it makes a record of the last time requestAnimationFrame fired, and compares it with the latest time the requestAnimationFrame fired. It compares those 2 times, looks at your target frame rate (60fps by default) and therefore knows what the delta is. When you add your function to the ticker, when requestAnimationFrame comes through, the ticker does it's calculations, then calls your function, also passing through the delta as it's first parameter.
  12. So, I'd _really_ recommend using the built in pixi stuff for this as Jinz suggested, as it'll give you all the information you need to use , and again I'll link to the example page; please read the code, it has comments explaining exactly what you want to know: https://pixijs.github.io/examples/#/basics/basic.js Note how it's added a function to the ticker ... this could be your function to do all your game update stuff. Also note how it multiplies the rotation speed by the delta. The delta here is your critical friend in helping you deal with different framerates on different devices. If your game is running at 60fps, and your target frame rate is 60fps, then the delta will be 1. So, in this case, multiplying your position change by 1 does nothing. But imagine the game is only running at half speed, 30fps. Well, the delta sent through now is 2. This is just what you need! You're function is being hit half the amount of times, so it needs to move your sprite double the amount each time.
  13. themoonrat

    Get all sprites?

    Yeah... think of rendertextures like when editing an image in photoshop, and you have all these layers, and when you come to save a png or jpg it asks if you're ok flattening everything into 1 layer. That's your rendertexture, so it's not going to show up in the scene graph all of the things that went on to make it up. And there is a chrome plugin inspector https://github.com/bfanger/pixi-inspector & https://chrome.google.com/webstore/detail/pixi-inspector/aamddddknhcagpehecnhphigffljadon?hl=en I found it didn't play nicely and got confused by renderTextures, for which I have my own hacked version of to solve, but the above might play out of the box nicely for you (the github version seems newer than the chrome store version, but didn't work for me at all)
  14. themoonrat

    Get all sprites?

    function recursiveFindSprites( spriteArray, displayObject ) { if ( displayObject.texture ) { spriteArray.push( displayObject ); } if ( Array.isArray( displayObject.children ) ) { for ( let i = 0; i < displayObject.children.length; ++i ) { recursiveFindSprites( spriteArray, displayObject.children[i] ); } } }; let spriteArray = []; recursiveFindSprites( spriteArray, renderer._lastObjectRendered ); Slightly hacky in that it's looking for a .texture property, which will also include Sprite like items like Text and such, but that's the if statement to fine tune for your needs
  15. So, how I have this setup is I call PIXI.loaders.Resource.setExtensionLoadType( 'mp3', PIXI.loaders.Resource.LOAD_TYPE.XHR ); PIXI.loaders.Resource.setExtensionXhrType( 'mp3', PIXI.loaders.Resource.XHR_RESPONSE_TYPE.BLOB ); For each audio format I have. I prefer to load data via XHR and as BLOBs because alongside a returned data blob is the size of it; useful info! Bonus tip 1: Prefer m4a over mp3. Better compression, better sound, better sound loops, same compatibility Bonus tip 2: Also use ogg, and check browser compatibility for which one to load. You need both to cover all browsers You'll need to create your own bit of 'middleware' to deal with audio. If you see https://github.com/englercj/resource-loader/blob/master/src/middlewares/parsing/blob.js - this comes included by default to handle blobs in certain formats, but it doesn't handle audio. It's very simple to create a new version of that file that works in the same way but just handles audio. You don't need to create a new Audio tag like that creates a new Image tag... all you just need to create an object url using the data blob. You can use this new parsing functionality into PIXIs loader by doing something like PIXI.loader.use( handleAudioBlob ); Now, put a callback on the loader for when an asset has loaded, and if it's an audio file, it'll already have the blob as a src from your custom middleware... you can use this as a src for a new Howl. After doing doing this, don't assume that it's immediately loaded, there's an audio decoding process that goes on ones a new Howl is created, but you know this is done via a callback 'onload'
  16. This is cool Very useful to give to the artists to then give text styles they'd want us to use. The same request was also posted to github there and someone also went away to do a similar thing: https://github.com/pixijs/pixi-text-style Maybe the 2 of you could work together?
  17. I'd just play around with the style using the pixi examples page https://pixijs.github.io/examples/#/basics/text.js
  18. Use SoundJS on old libs, Howler on new libs. I'd recommend Howler. It's worked more consistently across a range of devices and browsers for me, especially with sound sprites and especially with IE. The fact that it can also support extra effects is the icing on the cake
  19. Awesome work! Had a play, here are some things I found (old tester instinct kicked in!) Selecting Language and opening menu: The cursor icon appears in reverse of what I'd expect when hovering over a language to select. I'd expect the hand icon to appear when you can select something, but hovering over a language, or new game etc. it changes to a non interactive icon Opening Menu: I left the game running to type the above, and it's popping up that happines has his an all time low. Nothing game wise should pop up until I've selected an option When hovering over the "Start" button for Challenges, in canvas mode the button does not highlight on mouse over (but does for webgl) I think the tooltip of what you are hovering over should go blank once you stop hovering over something of interest. Otherwise it's showing something you're not hovering over (like builder community). I think you should restrict people from being able to move the camera faaaaar away from an actual viewable area I also thing you should restrict how far in and out a player can zoom the camera When bring up options to build, text for "dismantle object" merges into "Change machine". Maybe allow that text to go over 2 lines? If I open up to select the change machine, I'm allowed to close it, leaving a floating arrow and help box. I'd disable things you don't want people to be able to do in the tutorial (like select the wrong item, close a menu etc.) The task list is too far apart when showing what the task is, on the far left of the screen, and the complete icon to the far right of the screen. Maybe it doesnt need to be a full screen thing? The light from the neon lamps is waayyyy to bright! If I dismantle the neon lamp, the light remains The above also meant I couldn't select the machines below this deleted light source to set the prices I'd make setting prices arrows change the value relative to what the value already is. If it's below a dollar, make the increments 10cents, but if you're at 25 dollars already, making the increments $1, for example When placing a sofa facing to the right, after placing it I can see some graphic distortion to the far right, almost as if it's beginning ot show the sofa again If I delete a machine someone is playing on, the carry on playing and I still earn money from it After deleting a machine, the little red light source that comes from it remains Some machines increase capacity, like pinball, but others dont? If I have 2 of an identical machine, I'd expect raising the price of one to raise the price of the other If the price of a machine goes above $100, the value doesn't fit in the box anymoreIf I have, say $4000, I cannot afford to unlock wall tools, so it stays dimmed. But if, whilst that menu is still open, my cash goes above $5000, the button does not become available. I have to close and re-open the menu If I demolish a wall, people walk out of it, but the wall still appears visible. (actually, if I start building extra walls around that area, then the graphics update Get "The play() request was interrupted by a new load request" in the console
  20. In Chrome (i use Canary to dev with Dev experiments enabled) you can set cpu throttling, which may help you. http://deanhume.com/home/blogpost/cpu-throttling-using-chrome-developer-tools/10144
  21. There were a couple of errors there. First, you have a mousedown event that calls 'startPress', but there is no function in your example, so I commented that out. Second: You were doing app.stage.addChild(button0); - but the .stage only exist if you do a new PIXI.Application, not when you are just creating a renderer, which is what you were doing. Corrected code looks something like //Globals var width = 900; var height = 700; var app = new PIXI.Application( { width, height, backgroundColor: 0x1099bb} ); var animationStages = {menu:0, highscores:1, shop:2, options:3, exit:4, play:5}; var animationStage = animationStages.menu; function start(){ document.body.appendChild(app.view); showMenu(); } function showMenu(){ var button0 = PIXI.Sprite.fromImage('Assets/buttons/play.png'); button0.interactive = true; // button0.on("mousedown", startPress); button0.position.set(50, 100); app.stage.addChild(button0); }
  22. Sound like a plan to me, would definitely be interested to know how it goes (if you remember )
  23. There are 2 solutions, I think. 1. Your solution... you don't add directly to the resource loader, but to your own 'queue'. When the resource loader becomes free, you start it again with anything in your existing 'queue', and starting a new queue for any other requests in the meantime. 2. Have a pool of resource loaders... you just use the first free one. They're very lightweight, so no harm having more than one, as long as you're ok with potentially more simultaneous assets being downloaded at the same time
  24. I'd recommend taking a look at the official Pixi examples page: https://pixijs.github.io/examples They all use the new PIXI.Application style, and if assets are required to be prepared, like the animated sprite demo (https://pixijs.github.io/examples/#/demos/animatedsprite-demo.js), you'll see how the loader can be used, though you've already cracked that i see