themoonrat

Members
  • Content Count

    262
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by themoonrat

  1. If you wanted to go down that route, you can also do const prettyImage = new PIXI.Sprite(); const constructorName = prettyImage.constructor.name; // will return 'Sprite' https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name
  2. Both are great options! The main advantage of Howler is it's wider use. I use it, and love it, and feel more secure in using it because so many devs do too. The main downside is fitting it into the Pixi loading process. Even if you download audio as a blob, you still need to account in your preloading process for passing it to Howler for it to be decoded. The main advantage for Pixi Sound is that it covers this integration for you. In production code, it's easier to get up and running. And the syntax and use is all very familiar because it was made by a Pixi Dev. But that's not saying Pixi Sound is not reliable, it is! And it's not saying Howler is hard to use... it really isn't. Both are great options with active and receptive maintainers.
  3. 1. I would use m4a as primary choice, and off as fallback. m4a has the same compatibility range on browsers as mp3, but sounds better for the same file size, and loops better for background music. ogg is the fallback for the uncommon occasion m4a isn't supported. 2. ALL mobile browsers now require a user touch to enable unlocking audio. If you have a 'touch here to continue' kinda screen after loading, that'll get you the touch you need
  4. They are popping in because the assets are loading in the background, and show when they've finished loading. To stop that effect, you should use the preloader within pixi to preload all assets (showing a loading screen perhaps) before starting the game
  5. https://github.com/pixijs/pixi-sound is made to integrate into the loader that pixi uses, and is successfully used in a number of projects. You really want to use another lib to handle sound to get web audio support at the very least. Otherwise you're setting yourself up for more issues in the future.
  6. I'd really recommend using Howler or pixi sound for audio, it'll handle this stuff for you
  7. Mobile requires a user interaction to 'unlock' audio and allow it to play
  8. The scale mode of the texture needs to be set to nearest. You can either do that on a texture by texture basis via the scaleMode property, or change the default via http://pixijs.download/dev/docs/PIXI.settings.html#.SCALE_MODE
  9. For mobile devices, some of those events above are not classes as valid events to unlock audio or unlock full screen API. touchstart or touchend is usually what you need
  10. themoonrat

    WebP

    It's all about what the browser supports
  11. call .update() on the texture (the texture that is created with the canvas as the source) ?
  12. Less telepathic, more your friendly neighbourhood @ping
  13. So, what I do for my button class is something like this this.on( 'pointerdown', this._onPointerDown, this ); PIXI.renderer.plugins.interaction.on( 'pointerup', this._onPointerUp, this ); So, the down part looks for just the button being pressed down. But the up bit looks at the interaction manager global 'up' event. This way, if someone presses down on a button, then moves the mouse away from the button and releases, the 'up' still gets fired for this button. A quick overview of the pointdown and pointerup functions _onPointerDown( event ) { if ( !this._isDown && event.data.isPrimary ) { this._isDown = true; // do down stuff } } _onPointerUp( event ) { if ( this._isDown && event.data.isPrimary ) { this._isDown = false; // do up stuff } } So first thing we do is track ourselves if that button itself is down or up... that way on a global up, if the button is not down, nothing happens The other thing is we check against 'isPrimary', so we're looking at the primary mouse button, or the first touch event. You don't have to have that, and it stops a 2nd touch effecting a button press... but restricting it can make your life easier!
  14. When I saw the title I thought I'd done a pr for it at some stage! It wasn't accepted into pixi official because there were worries about the text api becoming a bit crazy. The hope in the future is that you could pass perhaps a PIXI.Gradient into the fill properties, and thus no need for separate stop point and gradient type settings every time it's an option. But I use the contents of that PR in my games on my own pixi fork
  15. Just to second using Howler... it's the best audio lib out there IMO. Also second using m4a and ogg. mp3's have some issues in browsers with seeking and looping nicely, in my experience. I'd also recommend having different compression settings, which are selected based on the device. Mono 96kbps might be good enough for mobile devices, but maybe supply Stereo 128kbps (or above) for PC players where memory is unlikely to be an issue, and better speakers almost certainly going to be used.
  16. http://pixijs.io/examples/#/demos/texture-swap.js
  17. You shouldn't be using multiple renderers. Just use multiple containers, with the parent most container having the mask on it, seeing through to the container below it
  18. Nopes, you've done the right thing with the fromUrls You don't want to cast it... they're different things. 'BaseTexture' and 'VideoBaseTexture' contain data about the actual image/video. A 'Texture' is some information about what part of that base image / video to use. For example, if you have a spritesheet... that whole image is the BaseTexture, but you just want to draw from certain sections of that image, and those would be the Textures pointing to different parts of the BaseTexture. So Sprites use a Texture, which contains information on how to use it's BaseTexture
  19. Could you supply an example or fiddle with which we could take a look?
  20. And make sure to request it within a callback for a valid mouse or touch event https://github.com/sindresorhus/screenfull.js/ Helps cover the various browser prefixes
  21. There's PIXI Tween Original: https://github.com/Nazariglez/pixi-tween My version: https://github.com/themoonrat/pixi-tween Typescript version: https://github.com/LOTUM/pixi-tween
  22. Ok, it might be because you're not adjusting the movent of the sprite by the delta Take a look at the example http://pixijs.io/examples/#/basics/basic.js and notice how it multiplies movement by delta, to account for slight inaccuracies in timing of requestAnimationFrame. Lastly, after that, if there are still issues... just host the page somewhere and access it via your browser. I make games to be accessed via the browser and the S7 runs like a dream. Maybe it's something to do with phone gap?
  23. It's most likely because of your resolution property. As an example, if the width and height of the window was 1280x720, but the devicePixelRatio returned 3, internally, pixi is now trying to render the screen at 4k resolution. Ouch! Don't use device pixel ratio is my advice for games
  24. You could also consider adding your events at the renderer level, and do some maths to translate to your container. ie. let location = new PIXI.Point(); renderer.plugins.interaction.on( 'pointerdown', ( event ) => { container.worldTransform.applyInverse( event.data.global, location ); }
  25. @Gerente You may be interested in https://github.com/pixijs/pixi-ui - which I think achieves some of what you are trying to achieve (it has the concept of being able to anchor a container to the edge of another container)