Search the Community

Hi, I have problem with phaser performance. The phaser CPU usage is too high. Configuration : - game is on phaser 3 with vue - main page is on vue with game in iFrame this.gameInstance = new Phaser.Game({ width: properties.width, height: properties.height, resolution: PIXEL_RATIO, "callbacks.postBoot": function() { document.getElementsByTagName("canvas")[0].style.width = properties.width + "px" document.getElementsByTagName("canvas")[0].style.height = properties.height + "px" }, scaleMode: 0, type: Phaser.CANVAS, parent: document.getElementById('game'), title: '☕️ Brunch with Phaser and ES6', // 'My Phaser 3 Game' url: 'https://github.com/samme/brunch-phaser-es6', version: '0.0.1', banner: { background: ['#e54661', '#ffa644', '#998a2f', '#2c594f', '#002d40'] }, fps: { min: 10, target: 60, forceSetTimeout: true, }, loader: { path: 'static/phaser/', }, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 300 }, }, }, scene: [ LoaderScene, BootScene, DefaultScene, GameOverScene, ], }); CPU usage: - Phaser = 40% - Phaser with vue = 80-90% - main page without iframe = 5-10 % - main page with iframe = 100% js heap size: - Phaser = 50 - 70 MB - Phaser with vue ~ 70 - 100MB - main page without iFrame ~ 50 - 80 MB - main page with iFrame ~ 100 - 150 MB The game is equipped with 20-30 icons, 10 atlases, 19 mp3 sounds and 5 background image, with total size of assets about 3MB. Thank you in advance

I'm sorry for making the title that long....and also my content will be... Recently I'm quite tortured by a tricky problem, mainly on iOS mobile, things are like this... I inserted a Babylonjs project into a third-party homepage through iframe tags. As you know, the home page has header, footer, another content and the iframe part. When I scroll to the iframe part, and want to interact with the canvas, as long as I tap the canvas, the page jumps to the bottom immediately. Strange! I scroll back, and continue to pinch, rotate the canvas, it goes normally (do not touch other part, only the canvas after jumping). As long as I have tapped the UI, and then tap the canvas, history will happen again. I tried other projects (also build with Babylonjs)， some will not have this problem. So I made a detailed comparison, excluding the potential problem raised by html ,css. The main difference might be the version of Babylon.js. The ones that have jumping problems use the babylon.3.1.1.min VERSION , while those don't have problem, use this Version , it's compressed and I forgot the version now. Can anybody tell which version the latter is? and what's difference between them, especially about issues like canvas focus, tapping event on iOS... The test link that having the problem is this , the visit speed might be slow out of China. But the problem will be like what I mentioned above. I guess it's something about canvas.focus(). but not sure..I know you guys are more experienced and smarter. I would really appreciate!!!!!!!! 5e2233d9ce8a56b9700997ac243d5838 (1).mp4

I was wondering if anybody knows how could I go about rendering an iframe over a plane. As far as I understand that's not possible with textures, like we do with images or videos, but I found http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ , where he archived the result I'm looking for with threejs. I was wondering if there is something like the CSS3DRender for Babylon.

Hi, i can't play sound only on android chrome, getting error "phaser.min.js:21 An AudioContext in a cross origin iframe must be created or resumed from a user gesture to enable audio output". Any solution?

I'm building web-pages which contain multiple iframes of Babylon.js sites. At most I've had 6 iframes on the same page with 3D content. (this one http://www.aarontyler.com.au/blog/strayashrapnel) I'm doing this because I want to sprinkle 3D elements throughout the website and it can't be done with one canvas. Is there any problem that this could cause? If so, is there a better way to do this? I previously had an issue with multiple audio engines being created but that was fixed by using the core js file without the audio engine.

HI everyone, i got a scale bug on ios device with using iframe. game.js use these codes: this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.game.scale.setScreenSize(); this.game.scale.refresh(); my file structur : /root/app/game1/1.html /root/app/game2/2.html /root/app/game3/3.html /root/app/index.html for example : index.html use iframe : <iframe src="game1/1.html" class="game-canvas-iframe" id="game_frame">Your browser doesn't support IFrames</iframe> it's working nice on desktop or android device , but on ios device , entire scene will keep scalling and never stoped; and this is test results: visit /root/app/game1/1.html visit /root/app/index.html desktop nice nice android nice nice iphone nice terrible ipad nice terrible here is the example: Nice Page : http://210.73.212.143:81/GameServer/app/game1/1.html Bug Page : http://210.73.212.143:81/GameServer/app/index.html

Hi all, Whilst creating a game for a client, I came across a bug with responsive CSS iFrames, where the frame wouldn't obey the CSS applied, and expand past the parent ONLY on iOS devices, so I created a demo to try to find the cause (see iframe example at bottom). Looking at the forums, it appears there has been a few unanswered posts on the topic, so I thought I would give it an attempt myself. I got nowhere! ...But after doing some surfing on iOS iframes, I found a semi-related article at: https://www.magnolia-cms.com/blogs/christopher-zimmermann/detail~@strategies-for-the-iframe-on-the-ipad-problem~.html which raised a separate issue with scrolling. Following one of their solutions, to use an <object> instead of <iframe>, this seems to have fixed the issue on iOS. I've got limited devices to test this on just now, but it appears to work on my pc browsers, mac, iPhone and 2 androids. Apart from sharing my solution, I was just wondering what your thoughts were on the issue. Is this a problem that lies with the iFrame code on iOS, or is this something that Phaser could change to handle? I've raised a github issue just incase. Does the solution seem to work on your devices, and is there any downsides to an <object> over an <iframe>? Cheers as always! -- Examples -- iframe example: http://seejay.co.uk/phaserios/iframe.html object example: http://seejay.co.uk/phaserios/object.html

Hi guys, I'm starting to go a little insane trying to figure this out, so any help would be appreciated. Touch events on the Phaser canvas aren't registering, but only in an iframe with Chrome for iOS. Other mobile browsers and desktop browsers work fine. It works when the game isn't in an iframe, and touches on other elements inside the iframe register just fine. After dozens of different fixes from numerous sources and lots of debugging, I'm pretty sure the problem lies with the canvas itself and not with the iframe or surrounding elements. I've tried setting a bunch of properties on the canvas like pointer-events and user-select, just on the off chance thats its a simple setting, but nothing has worked. Has anyone else experienced this? The code that goes with this is large and rather fragmented, but at this point I'm guessing its a default setting of Phaser that I'm not overriding, so I doubt my existing code would be that helpful.

I have just finished building a game using Pixi.js. I am using the keyboard example on this page https://github.com/kittykatattack/learningPixi for keyboard input. function keyboard(keyCode) {var key = {};key.code = keyCode;key.isDown = false;key.isUp = true;key.press = undefined;key.release = undefined;//The `downHandler`key.downHandler = function(event) {if (event.keyCode === key.code) {if (key.isUp && key.press) key.press();key.isDown = true;key.isUp = false;}event.preventDefault();};//The `upHandler`key.upHandler = function(event) {if (event.keyCode === key.code) {if (key.isDown && key.release) key.release();key.isDown = false;key.isUp = true;}event.preventDefault();};//Attach event listenerswindow.addEventListener("keydown", key.downHandler.bind(key), false);window.addEventListener("keyup", key.upHandler.bind(key), false);return key;}I understand that this is technically not a PIxi.js issue as the code above is just using standard Javascript. However I would like to know how others are overcoming this problem. What is the accepted way for handling keyboard input that would allow this project to also work inside of an iframe? Example of game working (no iframe): http://www.adamhportfolio.com/WebGames/LD33/ Example of game embedded in an iframe (keyboard input not working): http://adamhportfolio.com/ludum-dare-33-entry/ The code for the project if required can be found here: https://github.com/rad-corps/WebGames/tree/master/LD33 index.html is the entry point then GameLoop.js has the keyboard handling to get from the main menu to the game. Sorry its a mess, it was for a 72 hour game jam.

Hello, I have a IFrame and within the iframe I redirect to the game.html. When I click in the game.html everything freezes. Everything works fine when using a computer (any browser), windows phone or android, but with an iphone or ipad it won't work. Below are the example files to replay the problem... index.html: <html><body> <iframe src="click.html" height="900" width="800"/></body></html>click.html <!DOCTYPE html><html> <body> <a href="Game.html">CLICK HERE</a> </body></html>Game.html <!DOCTYPE html><html> <head> <style> body{overflow:hidden;} #game_div { width: 760px; height: 1100px; margin: auto; } </style> <script type="text/javascript" src="./Game/phaser.min.js"></script> <script type="text/javascript" src="./Game/main.js"></script> </head> <body> <div id="game_div"> </div> </body></html>main.js var game = new Phaser.Game(760, 1100, Phaser.AUTO, 'game_div');var overlay, countdownText;var counter = 0;var main_state = { preload: function() { }, create: function () { //game overlay overlay = game.add.graphics(0, 0); overlay.beginFill(0x00A54F, 0.8); overlay.drawRect(0, 0, game.width, game.height); countdownText = game.add.text((game.width / 2), (game.height / 2), counter, { font: "65px Arial", fill: "#ffffff", align: "center" }); countdownText.anchor.set(0.5,0.5); }, update: function() { countdownText.setText(counter++); }}game.state.add('main', main_state); game.state.start('main'); TNX

Hi, I'm momentarily experiencing really strange behavior of the function window.addEventListener('keydown', onKeyDown, false);now, first I had this integrated into my index.html by just writing: <script>window.addEventListener('resize', onResize, false);window.addEventListener('keydown', onKeyDown, false);</script>after the referencing of my "main.js" in which the functions 'onResize' and 'onKeyDown' are described. Now this works perfectly fine if you visit the original ■URL■ which is hosted on a free web-storage host called "bplaced.net" but it won't work if you visit the forwarded ■URL■ that I pay for. The forwarding is done by a Frame-Redirect, and so the page uses a frameset to display the content. Could this cause the problem and is there a way to fix it? Thanks in advance. ~Dinkelborg

Hi folks, I have a game built in Pixi, pulled into a website in an iFrame. The game takes up most of the screen except for a menu at top and a footer at bottom. The bottom of the game and the footer are off the bottom of the screen and I want the player to be able to scroll / swipe to see the bottom of the game and the footer of the site. It appears that since almost all of the visible screen is the canvas, the swipes are not picked up by the main site and so the site doesn't scroll. Any thoughts on how to get this to work? Thanks,

Hi all, random problem here, wondering if anyone has had it - we're trying to develop a facebook game which consists of a Phaser app running in an iFrame. It all works great, but for some reason, the keyboard keys never register in IE10. We've tried ensuring the iFrame has focus, tried setting game.stage.disableVisibilityChange to false and to true, but cannot for the life of us figure out why the Phaser app can't control the keyboard from within an iFrame. Does anyone know if there's a way, maybe from the parent document, to allow Phaser to capture the keys? Thanks in advance, Nick

Hello, is it possible to put an iframe on an object in Babylon.js ? LIke a TV screen on a wall for example.

Hi. I am using the following code in order to show iframed games and it's working fine on Android (Opera, Firefox, Chrome and stock browser), but on iPhone the games are not showing anymore. Sometimes it even closes the Safari. Could someone tell me what is wrong? I'm pretty sure it is something with my JavaScript code but I can figure out what is. <html><head><meta charset="utf-8"><title>game name</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta http-equiv="Content-Language" content="en"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="HandheldFriendly" content="true" /><meta name="mobile-web-app-capable" content="yes" /><style>html, body { margin: 0; weight:100%; height:100%;}#ifr { height: 100%; width: 100%; marginheight: 0; marginwidth: 0; frameBorder: 0;}</style><script><!--function autoResize() { var iframe = document.getElementsByTagName( 'iframe' )[0]; iframe.width = window.innerWidth; iframe.height = window.innerHeight }//--></script></head><body onresize="autoResize();"><iframe id="ifr" src="games/mygame/index.html" onload="autoResize();" seamless></iframe></body></html>