Use pixi-viewport too, so we can scroll the bots back into view.
Chris Pressey
3 years ago
| 0 | 0 |
/*
|
| 1 | |
* pixi-min.js and cyclobots.js must be loaded before this source.
|
|
1 |
* pixi-min.js, pixi-viewport.js, and cyclobots.js must be loaded before this source.
|
| 2 | 2 |
* After loading this source, call launch() to create and start the gewgaw.
|
| 3 | 3 |
*/
|
| 4 | 4 |
|
|
| 12 | 12 |
});
|
| 13 | 13 |
|
| 14 | 14 |
config.container.appendChild(app.view);
|
|
15 |
|
|
16 |
var viewport = new PIXI.extras.Viewport({
|
|
17 |
screenWidth: config.width,
|
|
18 |
screenHeight: config.height,
|
|
19 |
worldWidth: 1000,
|
|
20 |
worldHeight: 1000,
|
|
21 |
interaction: app.renderer.plugins.interaction
|
|
22 |
});
|
|
23 |
console.log(viewport);
|
|
24 |
|
|
25 |
app.stage.addChild(viewport);
|
|
26 |
viewport.drag();
|
| 15 | 27 |
|
| 16 | 28 |
var c = new Cyclobots().init({
|
| 17 | 29 |
width: config.width,
|
|
| 40 | 52 |
graphics.beginFill(0xff0000);
|
| 41 | 53 |
graphics.drawCircle(0, 0, 10);
|
| 42 | 54 |
graphics.endFill();
|
| 43 | |
app.stage.addChild(graphics);
|
|
55 |
viewport.addChild(graphics);
|
| 44 | 56 |
bot.graphics = graphics;
|
| 45 | 57 |
});
|
| 46 | 58 |
}
|
|
| 54 | 66 |
graphics.drawCircle(0, 0, 10);
|
| 55 | 67 |
graphics.endFill();
|
| 56 | 68 |
graphics.filters = [new PIXI.filters.BlurFilter()];
|
| 57 | |
app.stage.addChild(graphics);
|
|
69 |
viewport.addChild(graphics);
|
| 58 | 70 |
bot.graphics = graphics;
|
| 59 | 71 |
});
|
| 60 | 72 |
}
|
| 25 | 25 |
</div>
|
| 26 | 26 |
</div>
|
| 27 | 27 |
|
| 28 | |
<!-- to run this offline, download this file and change this URL to point to your local copy of pixi.min.js -->
|
|
28 |
<!-- to run this offline, download these files and change these URLs to point to your local copies of them -->
|
| 29 | 29 |
<script src="https://catseye.tc/contrib/pixi.js-v4.8.5/pixi.min.js"></script>
|
|
30 |
<script src="https://catseye.tc/contrib/pixi-viewport.js-3.4.1/pixi-viewport.min.js"></script>
|
|
31 |
|
| 30 | 32 |
<script src="../src/cyclobots.js"></script>
|
| 31 | 33 |
<script src="cyclobots-pixi-launcher.js"></script>
|
| 32 | 34 |
<script>
|