phaser-multires
Version:
A fast, free and fun HTML5 Game Framework for Desktop and Mobile web browsers.
82 lines (68 loc) • 2.77 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<title>Login example for Phaser Input</title>
<!-- Include Phaser Responsiveness JS -->
<script type="text/javascript" src="../dist/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
canvas {
box-shadow: 0px 0px 5px black;
margin: 20px auto;
}
</style>
<!-- Game we want to track -->
<script type="text/javascript">
var game = new Phaser.Game({
width: 800,
height: 600,
renderer: Phaser.AUTO,
transparent: true,
resolution: 2,
state: { create: create, preload: preload}
});
var img = null, btn = null, bmd = null, spr = null, mask = null;
function preload() {
game.load.image('bg', 'images/bg@1x.png');
game.load.image('mask1', 'images/mask@1x.png');
game.load.image('mask2', 'images/mask@0.5x.png');
game.load.atlas('atlas1', 'atlas/atlas@1x.png', 'atlas/atlas@1x.json');
game.load.atlas('atlas2', 'atlas/atlas@0.5x.png', 'atlas/atlas@0.5x.json');
}
function create(){
//let's add a nice background
img = game.add.image(0, 0, 'bg');
btn1 = game.add.image(game.width / 2, game.height / 2 - 75, 'atlas1', 'btn_01.png');
btn1.inputEnabled = true;
btn1.input.useHandCursor = true;
btn1.input.pixelPerfectOver = true;
btn1.anchor.set(0.5);
// btn2 = game.add.image(game.width / 2, game.height / 2 + 75, 'atlas2', 'btn_01.png');
// btn2.inputEnabled = true;
// btn2.input.useHandCursor = true;
// btn2.input.pixelPerfectOver = true;
// btn2.anchor.set(0.5);
mask = new Phaser.Image(game, 0, 0, 'mask2');
puzzle = new Phaser.Image(game, 0, 0, 'atlas2');
bmd = new Phaser.BitmapData(game, 'test', 104, 106);
bmd.alphaMask(puzzle, mask);
spr = game.add.image(game.width / 2, game.height / 2 + 75, bmd);
spr.anchor.set(0.5);
mask = new Phaser.Image(game, 0, 0, 'mask1');
puzzle = new Phaser.Image(game, 0, 0, 'atlas1');
bmd = new Phaser.BitmapData(game, 'test', 104, 106);
bmd.alphaMask(puzzle, mask);
spr = game.add.image(game.width / 2, game.height / 2 + 150, bmd);
spr.anchor.set(0.5);
}
</script>
</head>
<body>
</body>
</html>