themoonrat

Members
  • Content Count

    232
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by themoonrat

  1. themoonrat

    Popular libraries for pixijs

    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
  2. themoonrat

    Sprite texture change Lag on Mobile

    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
  3. You need to pass in the context to use in the third parameter for event listeners. this.sprite.on('mousedown', this.onClick, this);
  4. 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.
  5. 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.
  6. 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)
  7. 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
  8. themoonrat

    PIXI Loader & Audio (Howler etc)

    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'
  9. themoonrat

    Pixi Text Style Generator ? [SOLVED]

    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?
  10. themoonrat

    Pixi Text Style Generator ? [SOLVED]

    I'd just play around with the style using the pixi examples page https://pixijs.github.io/examples/#/basics/text.js
  11. themoonrat

    Sound Libs - SoundJS vs ?

    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
  12. themoonrat

    Please help test my game Arcade Builder

    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
  13. themoonrat

    Simulate irregular fps

    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
  14. themoonrat

    Problems displaying sprites

    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); }
  15. Sound like a plan to me, would definitely be interested to know how it goes (if you remember )
  16. 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
  17. themoonrat

    How Does Asset Loading Work With Pixi.js?

    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
  18. themoonrat

    Proper way to generate a texture from a graphics object in v4?

    oh, i see, yeah
  19. themoonrat

    Proper way to generate a texture from a graphics object in v4?

    I do that on the first line
  20. themoonrat

    Pixi.js Noob OOP advice appreciated

    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 https://github.com/edwinwebb/pixi-seed or https://github.com/Nazariglez/es6-pixi-bolierplate . They've not been updated recently, but you'll get an idea of how others structure their projects.
  21. themoonrat

    text Diacredical Marks pixijs problem?

    Try adding padding to the TextStyle?
  22. themoonrat

    BaseRenderTexture Documentation Errors

    Thanks for the heads up before nap time
  23. themoonrat

    swipe gesture in pixijs

    I'd see if hammer.js provides what you require
  24. themoonrat

    Dancing TextField with right align

    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 ( https://jsfiddle.net/7dv61c63/9/ ) 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
  25. themoonrat

    motion path in pixi?

    https://github.com/Nazariglez/pixi-tween also allows drawing a path for a tween to follow