SHARE
TWEET

Untitled

a guest Jul 21st, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var config = {
  2.     type: Phaser.CANVAS,
  3.     width: 800,
  4.     height: 600,
  5.     backgroundColor: '#000000',
  6.     parent: 'phaser-example',
  7.     pixelArt: true,
  8.     scene: {
  9.         preload: preload,
  10.         create: create,
  11.         update: update
  12.     }
  13. };
  14.  
  15. var game = new Phaser.Game(config);
  16. var controls;
  17.  
  18. function preload ()
  19. {
  20.     this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tileset-collision-shapes.json');
  21.     this.load.image('kenny_platformer_64x64', 'assets/tilemaps/tiles/kenny_platformer_64x64.png');
  22. }
  23.  
  24. function create ()
  25. {
  26.     var map = this.add.tilemap('map');
  27.     var tileset = map.addTilesetImage('kenny_platformer_64x64');
  28.     var layer = map.createStaticLayer('Tile Layer 1', tileset);
  29.  
  30.     var graphics = this.add.graphics();
  31.  
  32.     // Loop over each tile and visualize its collision shape (if it has one)
  33.     layer.forEachTile(function (tile)
  34.     {
  35.         var tileWorldPos = layer.tileToWorldXY(tile.x, tile.y);
  36.         var collisionGroup = tileset.getTileCollisionGroup(tile.index);
  37.  
  38.         if (!collisionGroup || collisionGroup.objects.length === 0) { return; }
  39.  
  40.         // You can assign custom properties to the whole collision object layer (or even to
  41.         // individual objects within the layer). Here, use a custom property to change the color of
  42.         // the stroke.
  43.         if (collisionGroup.properties && collisionGroup.properties.isInteractive)
  44.         {
  45.             graphics.lineStyle(5, 0x00ff00, 1);
  46.         }
  47.         else
  48.         {
  49.             graphics.lineStyle(5, 0x00ffff, 1);
  50.         }
  51.  
  52.         // The group will have an array of objects - these are the individual collision shapes
  53.         var objects = collisionGroup.objects;
  54.  
  55.         for (var i = 0; i < objects.length; i++)
  56.         {
  57.             var object = objects[i];
  58.             var objectX = tileWorldPos.x + object.x;
  59.             var objectY = tileWorldPos.y + object.y;
  60.  
  61.             // When objects are parsed by Phaser, they will be guaranteed to have one of the
  62.             // following properties if they are a rectangle/ellipse/polygon/polyline.
  63.             if (object.rectangle)
  64.             {
  65.                 graphics.strokeRect(objectX, objectY, object.width, object.height);
  66.             }
  67.             else if (object.ellipse)
  68.             {
  69.                 // Ellipses in Tiled have a top-left origin, while ellipses in Phaser have a center
  70.                 // origin
  71.                 graphics.strokeEllipse(
  72.                     objectX + object.width / 2, objectY + object.height / 2,
  73.                     object.width, object.height
  74.                 );
  75.             }
  76.             else if (object.polygon || object.polyline)
  77.             {
  78.                 var originalPoints = object.polygon ? object.polygon : object.polyline;
  79.                 var points = [];
  80.                 for (var j = 0; j < originalPoints.length; j++)
  81.                 {
  82.                     var point = originalPoints[j];
  83.                     points.push({
  84.                         x: objectX + point.x,
  85.                         y: objectY + point.y
  86.                     });
  87.                 }
  88.                 graphics.strokePoints(points);
  89.             }
  90.         }
  91.     });
  92.  
  93.     var help = this.add.text(16, 16, 'Collision shapes, parsed from Tiled', {
  94.         fontSize: '20px',
  95.         padding: { x: 20, y: 10 },
  96.         backgroundColor: '#ffffff',
  97.         fill: '#000000'
  98.     });
  99.     help.setScrollFactor(0);
  100.  
  101.     this.cameras.main.setScroll(80, 110);
  102.  
  103.     var cursors = this.input.keyboard.createCursorKeys();
  104.  
  105.     var controlConfig = {
  106.         camera: this.cameras.main,
  107.         left: cursors.left,
  108.         right: cursors.right,
  109.         up: cursors.up,
  110.         down: cursors.down,
  111.         acceleration: 0.04,
  112.         drag: 0.0005,
  113.         maxSpeed: 0.7
  114.     };
  115.  
  116.     controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
  117. }
  118.  
  119. function update (time, delta)
  120. {
  121.     controls.update(delta);
  122. }
RAW Paste Data
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
 
Top