Search the Community

Showing results for tags 'onresize'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 2 results

  1. 01271

    Code that runs on resize

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