• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by themoonrat

  1. 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.
  2. 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: 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.
  3. 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 & 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)
  4. 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
  5. 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 - 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'
  6. 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: Maybe the 2 of you could work together?
  7. I'd just play around with the style using the pixi examples page
  8. 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
  9. 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
  10. In Chrome (i use Canary to dev with Dev experiments enabled) you can set cpu throttling, which may help you.
  11. 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 =; 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); }
  12. Sound like a plan to me, would definitely be interested to know how it goes (if you remember )
  13. 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
  14. I'd recommend taking a look at the official Pixi examples page: They all use the new PIXI.Application style, and if assets are required to be prepared, like the animated sprite demo (, you'll see how the loader can be used, though you've already cracked that i see
  15. Hey! First of all, be wary of GSAP unless you're willing to (or your clients are willing to) pay for a business license! Second; es6 with it's classes syntax sugar makes an oop style a lot easier. I'm fact, pixi uses that right now, with a base display object class that a container inherits from, and a sprite is a container with a texture.. etc. es6 also adds in a standard way of creating and using modules; great for splitting up code into reusable classes/utils. Essentially, you'll want to use a transpiler to let you code in the latest language features to allow support for current browsers. Babel is the best (imo) Third.... There are tool chains like webpack, gulp, browserify etc that let you help build your game. The are some templates on github you may want to take a look at, like or . They've not been updated recently, but you'll get an idea of how others structure their projects.
  16. Try adding padding to the TextStyle?
  17. Thanks for the heads up before nap time
  18. I'd see if hammer.js provides what you require
  19. The reason this occurs within PIXI and not plain canvas is due to how PIXI does Text. Essentially, because drawing text is slow, when you change text on a PIXI.Text object, it draws that out to a canvas and then treats that as a texture to use a Sprite. Rendering this sprite each time is super fast. To get the alignment, it's taking this generated texture, and aligning that to it's right edge, rather than the text. I'm guessing this texture width is going up in non even amounts each time a 0 is added, and thus you're getting this pixel different wobble. As for a solution... meh. The latest pixi has a .trim = true you can set in pixi style, which I think helps ( ) but doesn't completely solve. It's also more intensive on cpu, trimming every texture generated by the text class. As a hack, u could also set the width of the text after it has been generated. The width size of your textures go 14 / 29 / 43 / 58 / 72. If you knew for example to manually set "00" to width 28, even though it's generate it as a 29 wide pixel, that might help? Since changing values rapidly is not a great idea with text anyway, what I do for counters is either use a bitmap fixed width font, or draw out each number, save as a texture, and re-use that texture as sprites for a counter. So 0000 would use the single "0" generated texture in 4 different sprites evenly spaced apart. Now, changing numbers is just changing which texture to use, which is super fast
  20. also allows drawing a path for a tween to follow
  21. And unrelated(ish) - I always recommend creating sprites using Sprite.fromFrame() if you expect them to be preloaded. fromFrame will only look in the texture cache, and report an error if it's not found fromImage which will try to load the image if it's not in the texture cache If I know I'm preloading assets, I'd rather get an error that it doesn't exist and work out why.
  22. If you wanted to be super quick about it, you could just iterate through everything in PIXI.utils.BaseTextureCache and upload everything from there.
  23. themoonrat

    Ticker FPS

    With JavaScript in the browser, you have to take the attitude that every line of code delivered to a user can be changed by them. So, taking away the tickets speed existence wouldn't solve anything, as they could manipulate the time deltas coming in from requestAnimationFrame manually (which is all the speed variable does in a ticker. You need the server to authenticate everything that the client is sending to the server. Validation on when the client is sending data to the server; ranges for how many times a second for example....and validation on every bit of data send to the server. If the client code is set so that it takes a player 1 second to run 100 pixels to the right, the server needs to validate this; if a client was x pos -500 one moment then x pos 500 the next, you know something fishy is up!