Added phaser build and hellophaser sample
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
@@ -0,0 +1,19 @@
|
||||
body {
|
||||
margin: 0px 0px 1px 0px; /* the extra 1px allows the iOS inner/outer check to work */
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#orientation {
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../images/orientation.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: rgb(0, 0, 0);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
72
resources/Project Templates/Full Screen Mobile/index.html
Normal file
72
resources/Project Templates/Full Screen Mobile/index.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Phaser Full Screen Mobile Example</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="HandheldFriendly" content="true" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="HandheldFriendly" content="true" />
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<meta name="apple-mobile-web-app-title" content="Phaser App">
|
||||
<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<!-- non-retina iPhone pre iOS 7 -->
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="icons/app_icon_57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="icons/app_icon_60x60.png">
|
||||
<!-- non-retina iPad pre iOS 7 -->
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="icons/app_icon_72x72.png">
|
||||
<!-- non-retina iPad iOS 7 -->
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="icons/app_icon_76x76.png">
|
||||
<!-- retina iPhone pre iOS 7 -->
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="icons/app_icon_114x114.png">
|
||||
<!-- retina iPhone iOS 7 -->
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="icons/app_icon_120x120.png">
|
||||
<!-- retina iPad pre iOS 7 -->
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="icons/app_icon_144x144.png">
|
||||
<!-- retina iPad iOS 7 -->
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="icons/app_icon_152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="256x256" href="icons/app_icon_256x256.png">
|
||||
<link rel="apple-touch-icon" sizes="512x512" href="icons/app_icon_512x512.png">
|
||||
<link rel="apple-touch-icon" sizes="1024x1024" href="icons/app_icon_1024x1024.png">
|
||||
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<script src="js/phaser.min.js"></script>
|
||||
<script src="src/Boot.js"></script>
|
||||
<script src="src/Preloader.js"></script>
|
||||
<script src="src/MainMenu.js"></script>
|
||||
<script src="src/Game.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="game"></div>
|
||||
<div id="orientation"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
// Create your Phaser game and inject it into the game div.
|
||||
// We did it in a window.onload event, but you can do it anywhere (requireJS load, anonymous function, jQuery dom ready, - whatever floats your boat)
|
||||
// We're using a game size of 1024 x 768 here, but you can use whatever you feel makes sense for your game of course.
|
||||
var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'game');
|
||||
|
||||
// Add the States your game has.
|
||||
// You don't have to do this in the html, it could be done in your Boot state too, but for simplicity I'll keep it here.
|
||||
game.state.add('Boot', BasicGame.Boot);
|
||||
game.state.add('Preloader', BasicGame.Preloader);
|
||||
game.state.add('MainMenu', BasicGame.MainMenu);
|
||||
game.state.add('Game', BasicGame.Game);
|
||||
|
||||
// Now start the Boot state.
|
||||
game.state.start('Boot');
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
86
resources/Project Templates/Full Screen Mobile/src/Boot.js
Normal file
86
resources/Project Templates/Full Screen Mobile/src/Boot.js
Normal file
@@ -0,0 +1,86 @@
|
||||
BasicGame = {
|
||||
|
||||
/* Here we've just got some global level vars that persist regardless of State swaps */
|
||||
score: 0,
|
||||
|
||||
/* If the music in your game needs to play through-out a few State swaps, then you could reference it here */
|
||||
music: null,
|
||||
|
||||
/* Your game can check BasicGame.orientated in internal loops to know if it should pause or not */
|
||||
orientated: false
|
||||
|
||||
};
|
||||
|
||||
BasicGame.Boot = function (game) {
|
||||
};
|
||||
|
||||
BasicGame.Boot.prototype = {
|
||||
|
||||
preload: function () {
|
||||
|
||||
// Here we load the assets required for our preloader (in this case a background and a loading bar)
|
||||
this.load.image('preloaderBackground', 'images/preloader_background.jpg');
|
||||
this.load.image('preloaderBar', 'images/preloadr_bar.png');
|
||||
|
||||
},
|
||||
|
||||
create: function () {
|
||||
|
||||
this.input.maxPointers = 1;
|
||||
this.stage.disableVisibilityChange = true;
|
||||
|
||||
if (this.game.device.desktop)
|
||||
{
|
||||
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
|
||||
this.scale.minWidth = 480;
|
||||
this.scale.minHeight = 260;
|
||||
this.scale.maxWidth = 1024;
|
||||
this.scale.maxHeight = 768;
|
||||
this.scale.pageAlignHorizontally = true;
|
||||
this.scale.pageAlignVertically = true;
|
||||
this.scale.setScreenSize(true);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
|
||||
this.scale.minWidth = 480;
|
||||
this.scale.minHeight = 260;
|
||||
this.scale.maxWidth = 1024;
|
||||
this.scale.maxHeight = 768;
|
||||
this.scale.pageAlignHorizontally = true;
|
||||
this.scale.pageAlignVertically = true;
|
||||
this.scale.forceOrientation(true, false);
|
||||
this.scale.hasResized.add(this.gameResized, this);
|
||||
this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);
|
||||
this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);
|
||||
this.scale.setScreenSize(true);
|
||||
}
|
||||
|
||||
this.state.start('Preloader');
|
||||
|
||||
},
|
||||
|
||||
gameResized: function (width, height) {
|
||||
|
||||
// This could be handy if you need to do any extra processing if the game resizes.
|
||||
// A resize could happen if for example swapping orientation on a device.
|
||||
|
||||
},
|
||||
|
||||
enterIncorrectOrientation: function () {
|
||||
|
||||
BasicGame.orientated = false;
|
||||
|
||||
document.getElementById('orientation').style.display = 'block';
|
||||
|
||||
},
|
||||
|
||||
leaveIncorrectOrientation: function () {
|
||||
|
||||
BasicGame.orientated = true;
|
||||
|
||||
document.getElementById('orientation').style.display = 'none';
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
51
resources/Project Templates/Full Screen Mobile/src/Game.js
Normal file
51
resources/Project Templates/Full Screen Mobile/src/Game.js
Normal file
@@ -0,0 +1,51 @@
|
||||
|
||||
BasicGame.Game = function (game) {
|
||||
|
||||
// When a State is added to Phaser it automatically has the following properties set on it, even if they already exist:
|
||||
|
||||
this.game; // a reference to the currently running game
|
||||
this.add; // used to add sprites, text, groups, etc
|
||||
this.camera; // a reference to the game camera
|
||||
this.cache; // the game cache
|
||||
this.input; // the global input manager (you can access this.input.keyboard, this.input.mouse, as well from it)
|
||||
this.load; // for preloading assets
|
||||
this.math; // lots of useful common math operations
|
||||
this.sound; // the sound manager - add a sound, play one, set-up markers, etc
|
||||
this.stage; // the game stage
|
||||
this.time; // the clock
|
||||
this.tweens; // the tween manager
|
||||
this.world; // the game world
|
||||
this.particles; // the particle manager
|
||||
this.physics; // the physics manager
|
||||
this.rnd; // the repeatable random number generator
|
||||
|
||||
// You can use any of these from any function within this State.
|
||||
// But do consider them as being 'reserved words', i.e. don't create a property for your own game called "world" or you'll over-write the world reference.
|
||||
|
||||
};
|
||||
|
||||
BasicGame.Game.prototype = {
|
||||
|
||||
create: function () {
|
||||
|
||||
// Honestly, just about anything could go here. It's YOUR game after all. Eat your heart out!
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
// Honestly, just about anything could go here. It's YOUR game after all. Eat your heart out!
|
||||
|
||||
},
|
||||
|
||||
quitGame: function (pointer) {
|
||||
|
||||
// Here you should destroy anything you no longer need.
|
||||
// Stop music, delete sprites, purge caches, free resources, all that good stuff.
|
||||
|
||||
// Then let's go back to the main menu.
|
||||
this.state.start('MainMenu');
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
|
||||
BasicGame.MainMenu = function (game) {
|
||||
|
||||
this.music = null;
|
||||
this.playButton = null;
|
||||
|
||||
};
|
||||
|
||||
BasicGame.MainMenu.prototype = {
|
||||
|
||||
create: function () {
|
||||
|
||||
// We've already preloaded our assets, so let's kick right into the Main Menu itself.
|
||||
// Here all we're doing is playing some music and adding a picture and button
|
||||
// Naturally I expect you to do something significantly better :)
|
||||
|
||||
this.music = this.add.audio('titleMusic');
|
||||
this.music.play();
|
||||
|
||||
this.add.sprite(0, 0, 'titlepage');
|
||||
|
||||
this.playButton = this.add.button(400, 600, 'playButton', this.startGame, this, 'buttonOver', 'buttonOut', 'buttonOver');
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
// Do some nice funky main menu effect here
|
||||
|
||||
},
|
||||
|
||||
startGame: function (pointer) {
|
||||
|
||||
// Ok, the Play Button has been clicked or touched, so let's stop the music (otherwise it'll carry on playing)
|
||||
this.music.stop();
|
||||
|
||||
// And start the actual game
|
||||
this.state.start('Game');
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
@@ -0,0 +1,61 @@
|
||||
|
||||
BasicGame.Preloader = function (game) {
|
||||
|
||||
this.background = null;
|
||||
this.preloadBar = null;
|
||||
|
||||
this.ready = false;
|
||||
|
||||
};
|
||||
|
||||
BasicGame.Preloader.prototype = {
|
||||
|
||||
preload: function () {
|
||||
|
||||
// These are the assets we loaded in Boot.js
|
||||
// A nice sparkly background and a loading progress bar
|
||||
this.background = this.add.sprite(0, 0, 'preloaderBackground');
|
||||
this.preloadBar = this.add.sprite(300, 400, 'preloaderBar');
|
||||
|
||||
// This sets the preloadBar sprite as a loader sprite.
|
||||
// What that does is automatically crop the sprite from 0 to full-width
|
||||
// as the files below are loaded in.
|
||||
this.load.setPreloadSprite(this.preloadBar);
|
||||
|
||||
// Here we load the rest of the assets our game needs.
|
||||
// As this is just a Project Template I've not provided these assets, the lines below won't work as the files themselves will 404, they are just an example of use.
|
||||
this.load.image('titlepage', 'images/title.jpg');
|
||||
this.load.atlas('playButton', 'images/play_button.png', 'images/play_button.json');
|
||||
this.load.audio('titleMusic', ['audio/main_menu.mp3']);
|
||||
this.load.bitmapFont('caslon', 'fonts/caslon.png', 'fonts/caslon.xml');
|
||||
// + lots of other required assets here
|
||||
|
||||
},
|
||||
|
||||
create: function () {
|
||||
|
||||
// Once the load has finished we disable the crop because we're going to sit in the update loop for a short while as the music decodes
|
||||
this.preloadBar.cropEnabled = false;
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
// You don't actually need to do this, but I find it gives a much smoother game experience.
|
||||
// Basically it will wait for our audio file to be decoded before proceeding to the MainMenu.
|
||||
// You can jump right into the menu if you want and still play the music, but you'll have a few
|
||||
// seconds of delay while the mp3 decodes - so if you need your music to be in-sync with your menu
|
||||
// it's best to wait for it to decode here first, then carry on.
|
||||
|
||||
// If you don't have any music in your game then put the game.state.start line into the create function and delete
|
||||
// the update function completely.
|
||||
|
||||
if (this.cache.isSoundDecoded('titleMusic') && this.ready == false)
|
||||
{
|
||||
this.ready = true;
|
||||
this.state.start('MainMenu');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user