Skip to content

Instantly share code, notes, and snippets.

@servercharlie
Last active February 1, 2018 05:18
Show Gist options
  • Save servercharlie/efa6eea2493fdd35d3192ec3066819c5 to your computer and use it in GitHub Desktop.
Save servercharlie/efa6eea2493fdd35d3192ec3066819c5 to your computer and use it in GitHub Desktop.
Proper PIXI window resizing, w/ jQuery.
/*
- Insert this after:
- referencing jquery.min.js
- referencing pixi.min.js
- creating your PIXI Application instance.
- Point being:
- Window resize binding fucks up if the document isn't ready yet, specially in Chrome.
- Hence, we use jQuery here to ensure the document is in fact ready first,
before we actually bind that shit.
- References:
- @ http://stackoverflow.com/questions/30554533/dynamically-resize-the-pixi-stage-and-its-contents-on-window-resize-and-window
*/
var YourPixiApplication = new PIXI.Application({
// pixi app options go here.
});
$(document).ready(function(){
$(window).resize(function(){
// we multiplied it by 0.95 so it won't show scrollbars on browsers.
// remove it if you want.
var w = window.innerWidth * 0.95;
var h = window.innerHeight * 0.95;
//this part resizes the canvas but keeps ratio the same
YourPixiApplication.renderer.view.style.width = w + "px";
YourPixiApplication.renderer.view.style.height = h + "px";
//this part adjusts the ratio:
YourPixiApplication.renderer.resize(w,h);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment