SHOW:
|
|
- or go back to the newest paste.
| 1 | // http://phaser.io/examples/v2/tilemaps/csv-map-with-p2 | |
| 2 | ||
| 3 | var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
| |
| 4 | ||
| 5 | function preload() {
| |
| 6 | ||
| 7 | game.load.tilemap('map', 'assets/tilemaps/csv/catastrophi_level2.csv', null, Phaser.Tilemap.CSV);
| |
| 8 | game.load.image('tiles', 'assets/tilemaps/tiles/catastrophi_tiles_16.png');
| |
| 9 | game.load.image('player', 'assets/sprites/tinycar.png');
| |
| 10 | ||
| 11 | } | |
| 12 | ||
| 13 | var map; | |
| 14 | var layer; | |
| 15 | var cursors; | |
| 16 | var player; | |
| 17 | var renderTexture; | |
| 18 | var renderSprite; | |
| 19 | var help; | |
| 20 | var map; | |
| 21 | var layer; | |
| 22 | var cursors; | |
| 23 | var player; | |
| 24 | var renderTexture; | |
| 25 | var renderSprite; | |
| 26 | var help; | |
| 27 | ||
| 28 | function create() {
| |
| 29 | ||
| 30 | game.physics.startSystem(Phaser.Physics.P2JS); | |
| 31 | ||
| 32 | ||
| 33 | ||
| 34 | // Because we're loading CSV map data we have to specify the tile size here or we can't render it | |
| 35 | map = game.add.tilemap('map', 16, 16);
| |
| 36 | ||
| 37 | // Now add in the tileset | |
| 38 | map.addTilesetImage('tiles');
| |
| 39 | ||
| 40 | // Create our layer | |
| 41 | layer = map.createLayer(0); | |
| 42 | ||
| 43 | // Resize the world | |
| 44 | layer.resizeWorld(); | |
| 45 | ||
| 46 | // This isn't totally accurate, but it'll do for now | |
| 47 | map.setCollisionBetween(54, 83); | |
| 48 | ||
| 49 | // Convert the tilemap layer into bodies. Only tiles that collide (see above) are created. | |
| 50 | // This call returns an array of body objects which you can perform addition actions on if | |
| 51 | // required. There is also a parameter to control optimising the map build. | |
| 52 | game.physics.p2.convertTilemap(map, layer); | |
| 53 | ||
| 54 | // Player | |
| 55 | player = game.add.sprite(48, 48, 'player'); | |
| 56 | ||
| 57 | game.physics.p2.enable(player); | |
| 58 | ||
| 59 | game.physics.p2.setBoundsToWorld(true, true, true, true, false); | |
| 60 | ||
| 61 | - | renderTexture=game.add.renderTexture(200,200,"rt") |
| 61 | + | |
| 62 | - | renderTexture.resolution=0.5 |
| 62 | + | |
| 63 | // Allow cursors to scroll around the map | |
| 64 | cursors = game.input.keyboard.createCursorKeys(); | |
| 65 | ||
| 66 | - | renderGroup.x=650 |
| 66 | + | |
| 67 | - | renderGroup.y=150 |
| 67 | + | |
| 68 | ||
| 69 | //renderTexture=game.add.renderTexture(200,200,"rt") | |
| 70 | //renderTexture.resolution=0.5 | |
| 71 | renderTexture=game.add.renderTexture(400,400,"rt") | |
| 72 | //renderTexture.resolution=0.5 | |
| 73 | ||
| 74 | renderGroup = game.add.group() | |
| 75 | // renderGroup.x=650 | |
| 76 | // renderGroup.y=150 | |
| 77 | ||
| 78 | ||
| 79 | var bg = game.add.graphics(0,0) | |
| 80 | bg.beginFill(0,1) | |
| 81 | bg.lineStyle(2, 0xFF0000, 1); | |
| 82 | - | renderSprite.x=0 |
| 82 | + | |
| 83 | - | renderSprite.y=0 |
| 83 | + | |
| 84 | renderGroup.add(bg) | |
| 85 | ||
| 86 | - | mask.lineStyle(2, 0xFF0000, 1); |
| 86 | + | |
| 87 | renderSprite.scale.set(0.25) | |
| 88 | renderSprite.width=200 | |
| 89 | renderSprite.height=200 | |
| 90 | - | mask.cacheAsBitmap=true |
| 90 | + | |
| 91 | ||
| 92 | renderSprite.anchor.set(0.5) | |
| 93 | ||
| 94 | ||
| 95 | renderGroup.add(renderSprite) | |
| 96 | ||
| 97 | var mask = game.add.graphics(0, 0); | |
| 98 | //mask.lineStyle(2, 0xFF0000, 1); | |
| 99 | mask.beginFill(0xFF0000,0.1) | |
| 100 | mask.drawCircle(0,0,200,200); | |
| 101 | mask.endFill() | |
| 102 | //mask.cacheAsBitmap=true // breaks mask | |
| 103 | renderGroup.add(mask) | |
| 104 | renderSprite.mask=mask; | |
| 105 | ||
| 106 | var outline = game.add.graphics(0, 0); | |
| 107 | outline.lineStyle(2, 0xFF0000, 1); | |
| 108 | //outline.beginFill(0xFF0000,0.1) | |
| 109 | outline.drawCircle(0,0,200,200); | |
| 110 | outline.endFill() | |
| 111 | renderGroup.add(outline) | |
| 112 | ||
| 113 | renderGroup.cameraOffset.x=650 | |
| 114 | renderGroup.cameraOffset.y=150 | |
| 115 | renderGroup.fixedToCamera=true | |
| 116 | renderTexture.render(layer, 0,0,true) | |
| 117 | ||
| 118 | ||
| 119 | } | |
| 120 | ||
| 121 | function update() {
| |
| 122 | ||
| 123 | if (cursors.left.isDown) | |
| 124 | {
| |
| 125 | player.body.rotateLeft(100); | |
| 126 | } | |
| 127 | else if (cursors.right.isDown) | |
| 128 | {
| |
| 129 | player.body.rotateRight(100); | |
| 130 | } | |
| 131 | else | |
| 132 | {
| |
| 133 | player.body.setZeroRotation(); | |
| 134 | } | |
| 135 | ||
| 136 | if (cursors.up.isDown) | |
| 137 | {
| |
| 138 | player.body.thrust(400); | |
| 139 | } | |
| 140 | else if (cursors.down.isDown) | |
| 141 | {
| |
| 142 | player.body.reverse(400); | |
| 143 | } | |
| 144 | ||
| 145 | ||
| 146 | w = layer.width | |
| 147 | h = layer.height | |
| 148 | ||
| 149 | // crop layer for render | |
| 150 | layer.setFrame({x:Math.max(0,player.x-game.camera.x)-200,y:Math.max(0,player.y-game.camera.y)-200,width:400,height:400})
| |
| 151 | //layer.setFrame({x:player.x, y:player.y, width:400, height:400})
| |
| 152 | m = new PIXI.Matrix() | |
| 153 | renderSprite.angle=-player.angle | |
| 154 | // reset layer to original dimensions | |
| 155 | renderTexture.render(layer, m, true) | |
| 156 | layer.setFrame({x:0, y:0, width:w, height:h})
| |
| 157 | ||
| 158 | } | |
| 159 | ||
| 160 | function render() {
| |
| 161 | } |