Search the Community

Hey all, I want to resize an element but not as often as I currently do it. Right now I have a project with an html element that gets resized on every frame and it runs on every update. game.gui.TextArea = me.Renderable.extend({ init: function() { this.textarea = document.createElement('textarea'); this.textarea.id = 'textHistory'; this.textarea.readOnly = "true"; this.textarea.disabled = "true"; me.video.getWrapper().appendChild(this.textarea); }, update: function() { videoPos = me.video.getPos(); this.textarea.style = 'width:' + (window.innerWidth - videoPos.width) + 'px; height:' + videoPos.height + 'px;'; } }); I'm concerned about this, this code will run way more often than it needs. Not sure about the performance impact but it only needs to run when the window size is updated. Is there a way I can piggyback on any melonjs functions that resize the canvas and only run it then?

Hi everyone!! I´ve developed a game based on "Spring Ninja" and I made it responsive: https://spritted.com/es/play/jump-bot As you can see the game auto-adapts to all screens taking all the available space on the window. It does the same in all platforms. I use the innerWidth and innerHeight to load a different size depending on the screen ratio: var innerWidth = window.innerWidth;var innerHeight = window.innerHeight;var gameRatio = innerWidth/innerHeight;if(innerWidth > innerHeight){ game = new Phaser.Game(Math.ceil(320*gameRatio), 320, Phaser.AUTO); } But I have a problem for mobile: when I load the game on "Portrait" and then the user changes the orientation I would like to reorder the Canvas to autoadapt to the new screen ratio. But I´m can´t do it. I wrote this code: $(window).resize(function() { resizeGame(); } );function resizeGame() { var innerWidth = window.innerWidth;var innerHeight = window.innerHeight;var gameRatio = innerWidth/innerHeight; game.width = Math.ceil(320*gameRatio); game.height = 320; game.stage.bounds.width = Math.ceil(320*gameRatio); game.stage.bounds.height = 320;game.scale.refresh(); } This code is supposed to set the new dimensions to the game, but instead of reescaling everything properly every object gets deformed: Is it possible to render again the game with the new size?