Search the Community

Hi, I've noticed that switching between states or entering next state causes frame drop in my game. First off all I need to say that I'm using Phaser.State in a little bit different way. I've split my game in multiple sections, like: IdleState, MovingState, AnimatingState, BonusGameState, etc....I was testing the game on my desktop PC, disabled practically all my code and also hidden all display objects. The only thing left in my game was testing the state switching, which resulted to be the main issue for the frame drop. It happens only twice, once you enter a new state. First frame drop (from 60FPS -> 20FPS) happens almost at the entering phase, and the 2nd happens always around 2.3s later. And this is super annoying especially because you can notice flicker in Moving & Animating state, even though we're talking here only about two occasions of frame drop per state. I would like to know what could be the most expensive method/command inside StateManager -> clearCurrentState() and StateManager -> setCurrentState(key) ? I wouldn't like to break everything apart now, just because of this. Is there a way to optimize anything here?

I have a situation where I need to know the duration of my sound elements before they are played. However, the duration is 0 (as well as durationMS and totalDuration). So I dug into the code and realised that duration is only set if the browser uses the audio tag, not when it uses the webaudio api (latest chrome use the latter). So what is the best way to get the duration? I have done some digging: Using the game.cache.getSound(key) you can extract information about the sound object. This object will hold a "data" property which has a "duration" property. But this is only set once the audio file has been decoded. The preload in a state does not wait for audio files to be decoded, which means that in the beginning of the create-state this data might not be available (aka when I need it to be). Have anyone battled audio duration and succeeded?

I'm currently working on a jukebox in phaser but i found a big problem, when change more than 17 song mobile devices crushes. I start looking the memory usage on chrome and see that although i use audio destroy, clear game cache, and reset references memory usage keep rise song by song loaded. I could not find a solution in phaser so do the same example with howler, and it happened the same, the use of memory kept going up. Search the forums and find this interesting solution / advice that incredibly worked Is it possible to use the html5 tag in one audio and the webaudio Api in another on phaser? or fix the high memory usage? With this solution in my example i pass from 400mb on memory to 80mb on memory. The code: phaser-howler: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create ,update: update}); function preload() { game.load.spritesheet('button', 'assets/flixel-button.png', 80, 20); game.load.bitmapFont('nokia', 'assets/nokia16black.png', 'assets/nokia16black.xml'); game.load.json('audios', 'assets/audios.json', false); } var currentSong; var songList; var prevSong; var nextSong; var currIndex = -1; var logYPosition = 0; var logYSeparation = 2; var fontSize = 16; var currentTextLog; var timer = 0; var initTimer = 0; var downloadTime = 0; var decodingTime = 0; var songLength = 0; var audioFolder = ""; var repTime = 1*1000; var volume = 0.5; var readyToplay = false; var ended = false; var tempjs = undefined; function create() { tempjs = game.cache.getJSON('audios'); game.stage.backgroundColor = "#FFFFFF"; songList = tempjs.files; audioFolder = tempjs.audiosource; startNextSong(); } function startNextSong(){ currIndex++; initTimer = 0; downloadTime = 0; decodingTime = 0; songLength = 0; if(currIndex>songList.length) { game.add.bitmapText(10, logYPosition + 7, 'nokia', "no more songs in playlist", fontSize); ended = true; return; } logYPosition += fontSize + logYSeparation; var audios = _getAudioFilesArray(audioFolder,songList[currIndex],tempjs.audiotypes); initTimer = game.time.time; currentSong = new Howl({ src: audios, html5: true }); currentSong.once('load', songLoadComplete); currentTextLog = game.add.bitmapText(10, logYPosition + 7, 'nokia', "Downloading song " + currIndex, fontSize); } function songLoadComplete(){ downloadTime = game.time.time - initTimer; currentTextLog.text = songList[currIndex] + " download time: "+downloadTime+ " Decoding file..."; initTimer = game.time.time; currentSong.play(); readyToplay = true; } function _getAudioFilesArray(audioFolder,audioName,audiotypes){ var returnArray = []; for(var audiotype in audiotypes){ var audio = audiotypes[audiotype]; returnArray[audiotype] = audioFolder+audioName+audio; } return returnArray; } function update(){ if(ended){ return; } if(currentSong!= undefined && currentSong.playing() && readyToplay){ var playingTime = (repTime - currentSong.seek()*1000); currentTextLog.text = songList[currIndex] + " download time: "+downloadTime+ "ms Decoding time: " + decodingTime + "ms Playing " + playingTime; } if(currentSong!= undefined && readyToplay && currentSong.playing() && (currentSong.seek()*1000>repTime)){ currentSong.stop(); currentSong.unload(); currentSong = undefined; readyToplay = false; startNextSong(); } } phaser-only: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create ,update: update}); function preload() { game.load.spritesheet('button', 'assets/flixel-button.png', 80, 20); game.load.bitmapFont('nokia', 'assets/nokia16black.png', 'assets/nokia16black.xml'); game.load.json('audios', 'assets/audios.json', false); } var currentSong; var songList; var prevSong; var nextSong; var currIndex = -1; var logYPosition = 0; var logYSeparation = 2; var fontSize = 16; var currentTextLog; var timer = 0; var initTimer = 0; var downloadTime = 0; var decodingTime = 0; var songLength = 0; var audioFolder = ""; var repTime = 1*1000; var volume = 0.5; var readyToplay = false; var ended = false; var tempjs = undefined; function create() { tempjs = game.cache.getJSON('audios'); game.stage.backgroundColor = "#FFFFFF"; songList = tempjs.files; audioFolder = tempjs.audiosource; startNextSong(); } function startNextSong(){ currIndex++; initTimer = 0; downloadTime = 0; decodingTime = 0; songLength = 0; if(currIndex>songList.length) { game.add.bitmapText(10, logYPosition + 7, 'nokia', "no more songs in playlist", fontSize); ended = true; return; } logYPosition += fontSize + logYSeparation; game.load.onLoadComplete.removeAll(); var audios = _getAudioFilesArray(audioFolder,songList[currIndex],tempjs.audiotypes); game.load.audio(songList[currIndex],audios,false); initTimer = game.time.time; game.load.onLoadComplete.add(songLoadComplete, this); currentTextLog = game.add.bitmapText(10, logYPosition + 7, 'nokia', "Downloading song " + currIndex, fontSize); game.load.start(); } function songLoadComplete(){ downloadTime = game.time.time - initTimer; currentTextLog.text = songList[currIndex] + " download time: "+downloadTime+ " Decoding file..."; initTimer = game.time.time; currentSong = game.add.audio(songList[currIndex],0); currentSong.onPlay.addOnce(songLoadDecode,this); currentSong.play(); } function _getAudioFilesArray(audioFolder,audioName,audiotypes){ var returnArray = []; for(var audiotype in audiotypes){ var audio = audiotypes[audiotype]; returnArray[audiotype] = audioFolder+audioName+audio; } console.log(returnArray); return returnArray; } function songLoadDecode(){ decodingTime = game.time.time - initTimer; console.log(currentSong.isDecoding); currentSong.volume = volume; readyToplay = true; } function update(){ if(ended){ return; } if(currentSong!= undefined && currentSong.isPlaying && readyToplay){ var playingTime = (repTime - currentSong.currentTime)/1000; currentTextLog.text = songList[currIndex] + " download time: "+downloadTime+ "ms Decoding time: " + decodingTime + "ms Playing " + playingTime; } if(currentSong!= undefined && readyToplay && currentSong.isPlaying && (currentSong.currentTime>repTime)){ currentSong.stop(); currentSong.destroy(); console.log(songList[currIndex]); game.cache.removeSound(songList[currIndex]); readyToplay = false; startNextSong(); } }

Hi everyone! Just wanted to share a small proof-of-concept game I've been working on for a while. It's called The monster's vault. The main goal is to find a way out of a dark creepy dungeon, pull a lever that opens the exit door, while not being caught by a wandering monster that dwells in the darkness, and bla-bla-bla... the whole point here is not about gameplay anyway. This game is inspired by Keith Clark's demo of an HL2 location made entirely by CSS 3d transforms. I tried to repeat his approach by making a browser 3d game with first-person view based on CSS transforms without any use of canvas graphics. My other goal was to try out a number of modern web technologies and APIs available in the browser, so here's what I came out with. ReactJS as a rendering framework and Redux as a game state manager. Kind of a questionable choice for a game, one may think, but hey, as I said, it's a proof-of-concept WIP demo pet home project =) Pointer lock events to control the cursor so that it cannot flow out of the screen. Gamepad api to support my Xbox One gamepad. I haven't been more happy when it actually worked (not sure about other controllers though). Web audio api to control the sounds and the music. It provides a way to place a sound in a 3d space and even make it spread in a certain direction, and that's really awesome. Using your headphones while playing is highly recommended. Service worker makes the game work offline as it caches all the resources after the first load. It can get annoying though, when you start facing the problems with invalidating the cache. I also tried out the svg lighting filters to simulate some shaders on the textures (set on highest graphics quality value in the Settings section). It looks neat but drops the fps dramatically. Some conclusions: declarative 3d graphics with CSS 3d transforms and animations are cool and relatively easy to use, but not performant enough (which is totally fine) modern browsers have some really great APIs helpful for creating various web games making horror games is a huge, huge fun PLEASE NOTE: The monster's vault is only a desktop game and is viewed best in latest Google Chrome. It is inconceivably untested and may not work as expected on most machines and browsers. Some of the technologies used here are still not standardized and may break in the future. Also, the code is not optimised in any way, it weights some MBs. The low rendering FPS is compensated by the high cooler's RPS =) Anyway, I warned you. The game's github repo with some gifs, controls and credits — https://github.com/alvov/the-monsters-vault-game. You can play the game here: https://alvov.github.io/the-monsters-vault-game. Thanks!

Got a game that plays sound as it should do on desktop, and iOS is pretty good too. However Chrome on Android is proving difficult. (Been testing primarily with a Galaxy S6 but the problem is common across a range of devices) The issue I am experiencing is that when the first sound tries to play there is a delay in the region of half to a whole minute before it eventually makes a noise. After the first sound plays the rest seem to work fine. We have a screen that needs user interaction to get through that is supposed to in the process unlock sound but for the purposes of this I've enabled the chrome://flags/#disable-gesture-requirement-for-media-playback so that it doesn't have any impact on the this issue. I can confirm that if I get the game to play a sound after it finishes the initial load with this flag enabled it will do so without user interaction, eventually - there is still the long delay. The game is using webAudio and sound spriting. All the sounds are added to phaser and spriting maps set up before any attempt to play sound is made. The sound file is being successfully loaded and is in ogg format to minimise decode time. If the game is left alone for a while before trying to play a sound the sound plays without delay. Does anyone recognise this problem? Any advice at trying to resolve it would be greatly appreciated.

I'm unsure if Babylon has this feature, however this functionality is in WebAudio. It would greatly improve the sound experience if there's an implementation of WebAudio, including modifications to pitch, bass, playback speed and some other things. It would be great if Babylon could have this feature implemented in its 3D space.

I had a go at js13k this year with R3V3RS3 IT, a webgl game in 10Kb (not 13 because I ran out of time before running out of space). I wanted to have some fun while doing some research for our upcoming projects. Regardless of the outcome of the competition, it's been a success because: I had lots of fun I learned some new stuffIn R3V3RS3 IT you chase balls of light in a precedurally-generated 3D landscape, while reconstructing a cheerful chiptune in reverse order. Typing this I realize it does sound a bit weird Best in Chrome (with voice synthesis!), but it does work in Firefox too. It's possible you need a decent graphics card, I haven't tried it on low-end hardware. I thought I'd post some links to some of the algorithms and techniques I've used, in case people are interested: Perlin noiseToroidal unwrapping of 3D noiseProcedural drum sounds with WebAudioOffline Audio ContextsBlinn-Phong shadingDerivative MapsPrecomputed derivative mapsA lot of other stuff, I just came up with it. Code is on GitHub.

Does anyone know how to make audio work on Windows Phone? I'm using intel XDK to export my phaser game to android and windows phone. Everything works great on android but on windows phone the loader gets stuck when trying to load the audio assets. I was using mp3s so I tried using mp3s and oggs but it still didn't work. The only way I got the game to get past the loading screen was by not using audio at all. Is there any way to get audio working on Windows Phone?

I'm developing a music game using Phaser. I want the game to run fast and I'm trying to decide what the best approach is. It seems my focus should be on WebAudio only so I can reliably have multiple sounds at once, correct?I've also heard the argument that WAV files will run faster than MP3s as they require less decoding.Would MOD or other tracker formats be the fastest or is generating the sound is more costly? Are there compatibility issues that come with a tracker plugin? Most of the sounds will be half a second or less, corresponding with player/enemy fire. Any thoughts are appreciated!

I made a Audio preprocessor with HTML5 Web audio API. Throw this into a node-webkit application add a ogg sound file and it will return a json with the processed data. https://github.com/morgondag/preprocess Keep in mind that this implementation is based on the RequestAnimationFrame so need to tweak if if you have another FPS in your game. I use this in a prototype mobile game where that part of the web audio API is not available in order to create rhythm based gameplay. The node-webkit part is just there to make use if the filesystem.