API tools faq
paste
Guest User

Phaser Auto Resize at Fixed Base Size

a guest
Oct 10th, 2014
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.49 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Phaser - Making your first game, part 1</title>
  6.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  7.     <script type="text/javascript" src="js/phaser.js"></script>
  8.     <style type="text/css">
  9.         body
  10.         {
  11.             margin: 0;
  12.         }
  13.        
  14.         h2, p
  15.         {
  16.             text-align: center;
  17.         }
  18.        
  19.         #game-canvas
  20.         {
  21.             width: 100%;
  22.             height: 100%;
  23.         }
  24.        
  25.         #game-container
  26.         {
  27.             margin: 0 auto;
  28.         }
  29.        
  30.         #outer-container
  31.         {
  32.             margin: 0 auto;
  33.             margin-top: 20px;
  34.            
  35.             display: block;
  36.             width: 100%;
  37.             height: 100%;
  38.             /*width: 640px;
  39.             height: 480px;*/
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.  
  45. <script type="text/javascript">
  46. function resizeGame()
  47. {
  48.     var gameArea = document.getElementById('game-container');
  49.     var widthToHeight = 4 / 3;
  50.     var newWidth = $("#outer-container").innerWidth();
  51.     var newHeight = $("#outer-container").innerHeight();
  52.     var newWidthToHeight = newWidth / newHeight;
  53.    
  54.     console.log("Inner Width: " + newWidth + " height: " + newHeight);
  55.     console.log("Normal Width: " +
  56.         $("#outer-container").width() +
  57.         " height: " +
  58.         $("#outer-container").height());
  59.    
  60.     if (newWidthToHeight > widthToHeight) {
  61.         newWidth = newHeight * widthToHeight;
  62.         gameArea.style.height = newHeight + 'px';
  63.         gameArea.style.width = newWidth + 'px';
  64.     } else {
  65.         newHeight = newWidth / widthToHeight;
  66.         gameArea.style.width = newWidth + 'px';
  67.         gameArea.style.height = newHeight + 'px';
  68.     }
  69.    
  70.     var gameCanvas = document.getElementById('game-canvas');
  71.     gameCanvas.width = newWidth;
  72.     gameCanvas.height = newHeight;
  73. }
  74.  
  75. function presentRender()
  76. {
  77.     var fromCanvas = $('#game canvas')[0];
  78.     var toCanvas = $('#game-canvas')[0];
  79.     var toWidth = $('#game-canvas').width();
  80.     var toHeight = $('#game-canvas').height();
  81.    
  82.     var context = toCanvas.getContext('2d');
  83.     context.drawImage(fromCanvas, 0, 0, toWidth, toHeight);
  84. }
  85.  
  86. $(function()
  87. {
  88.     var gameCanvas = document.getElementById('game-canvas');
  89.     var context = gameCanvas.getContext('2d');
  90.     context.imageSmoothingEnabled = false;
  91.    
  92.     resizeGame();
  93.     window.addEventListener('resize', resizeGame, false);
  94.     window.addEventListener('orientationchange', resizeGame, false);
  95.    
  96.     var gameMem = {};
  97.     gameMem.bmd = null;
  98.  
  99.     var game = new Phaser.Game(160, 144, Phaser.CANVAS, 'game',
  100.     {
  101.         preload: preload,
  102.         create: create,
  103.         update: update,
  104.         render: render
  105.     }, false, false);
  106.  
  107.     function preload()
  108.     {
  109.         game.stage.smoothed = false;
  110.         game.load.image('test', 'assets/testImage4.jpg');
  111.     }
  112.  
  113.     function create()
  114.     {
  115.         //  We're going to be using physics, so enable the Arcade Physics system
  116.         game.physics.startSystem(Phaser.Physics.ARCADE);
  117.         game.physics.arcade.gravity.y = 100;
  118.        
  119.         var img = game.add.sprite(0, 0, "test");
  120.         /*game.physics.enable([img], Phaser.Physics.ARCADE);
  121.         img.body.collideWorldBounds = false;*/
  122.        
  123.         /*gameMem.physicsGroup = game.add.group();
  124.         gameMem.physicsGroup.enableBody = true;
  125.  
  126.         gameMem.bmd = game.make.bitmapData();
  127.         gameMem.bmd.load('test');
  128.         //gameMem.bmd.processPixelRGB(forEachPixel, this);
  129.         gameMem.bmd.addToWorld(game.world.centerX, game.world.centerY, 0.5, 0.5);*/
  130.     }
  131.  
  132.     function update() {}
  133.  
  134.     function render()
  135.     {
  136.         var context = game.context;
  137.         gameMem.bmd2 = game.make.bitmapData();
  138.         gameMem.bmd2.load($("#game canvas")[0]);
  139.        
  140.         var canvas = $("#game canvas")[0];
  141.         var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
  142.        
  143.         for(var i = 0; i < imgData.data.length; i += 4)
  144.         {
  145.             var pixel =
  146.             {
  147.                 r: imgData.data[i],
  148.                 g: imgData.data[i+1],
  149.                 b: imgData.data[i+2],
  150.                 a: imgData.data[i+3]
  151.             };
  152.            
  153.             forEachPixel(pixel);
  154.            
  155.             imgData.data[i] = pixel.r;
  156.             imgData.data[i+1] = pixel.g;
  157.             imgData.data[i+2] = pixel.b;
  158.             imgData.data[i+3] = pixel.a;
  159.         }
  160.        
  161.         context.putImageData(imgData, 0, 0);
  162.         presentRender();
  163.     }
  164.  
  165.     function forEachPixel(pixel)
  166.     {
  167.         //The incoming pixel values
  168.         var r = pixel.r;
  169.         var g = pixel.g;
  170.         var b = pixel.b;
  171.  
  172.         // Average the pixels together
  173.         // to produce a single value
  174.         var avg = (r + g + b) / 3;
  175.  
  176.         // Change all the pixel colors to that value
  177.         // Producing a monochromatic color
  178.         r = avg;
  179.         g = avg;
  180.         b = avg;
  181.  
  182.         // Now load in the gameboy pallettes
  183.         // These are realistic shades to the gameboy
  184.         // The gameboy had 4 shades from darkest to lightest
  185.         var shade1 = {r: 15, g: 56, b: 15};
  186.         var shade2 = {r: 48, g: 98, b: 48};
  187.         var shade3 = {r: 140, g: 173, b: 15};
  188.         var shade4 = {r: 156, g: 189, b: 15};
  189.  
  190.         // Determine which shade it gets
  191.         // There are 256 possible colors so divide enevly by 4
  192.         var divider = 256 / 4; // (64)
  193.  
  194.         // This keeps it clamped in case for some weird
  195.         // reason it goes above or below the 0-255 range
  196.         var activeShade = shade1;
  197.         if(avg <= divider * 1) activeShade = shade1;
  198.         else if(avg <= divider * 2) activeShade = shade2;
  199.         else if(avg <= divider * 3) activeShade = shade3;
  200.         else if(avg <= divider * 4) activeShade = shade4;
  201.         else activeShade = shade4;
  202.  
  203.         //  Load in new pixel values
  204.         pixel.r = activeShade.r;
  205.         pixel.g = activeShade.g;
  206.         pixel.b = activeShade.b;
  207.  
  208.         // and return it
  209.         return pixel;
  210.     }
  211. });
  212. </script>
  213.  
  214.     <h2>Global Filter and Proportional Stretching Test</h2>
  215.     <p></p>
  216.  
  217.     <div id="game" style="display: none;"></div>
  218.    
  219.     <div id="outer-container">
  220.         <div id="game-container">
  221.             <canvas id="game-canvas"></canvas>
  222.         </div>
  223.     </div>
  224. </body>
  225. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!