diff --git a/moonlight/gfx/ui/background.png b/moonlight/gfx/ui/background.png new file mode 100644 index 0000000..92e7416 Binary files /dev/null and b/moonlight/gfx/ui/background.png differ diff --git a/moonlight/gfx/ui/creditsbtn_hover.png b/moonlight/gfx/ui/creditsbtn_hover.png new file mode 100644 index 0000000..cdb1c66 Binary files /dev/null and b/moonlight/gfx/ui/creditsbtn_hover.png differ diff --git a/moonlight/gfx/ui/gears.png b/moonlight/gfx/ui/gears.png new file mode 100644 index 0000000..bf8ea09 Binary files /dev/null and b/moonlight/gfx/ui/gears.png differ diff --git a/moonlight/gfx/ui/lightbar.png b/moonlight/gfx/ui/lightbar.png index 18921cf..e5625a8 100644 Binary files a/moonlight/gfx/ui/lightbar.png and b/moonlight/gfx/ui/lightbar.png differ diff --git a/moonlight/gfx/ui/loadingtube.png b/moonlight/gfx/ui/loadingtube.png new file mode 100644 index 0000000..73e4c04 Binary files /dev/null and b/moonlight/gfx/ui/loadingtube.png differ diff --git a/moonlight/gfx/ui/newgamebtn_hover.png b/moonlight/gfx/ui/newgamebtn_hover.png new file mode 100644 index 0000000..8595ba3 Binary files /dev/null and b/moonlight/gfx/ui/newgamebtn_hover.png differ diff --git a/moonlight/src/GameStates.js b/moonlight/src/GameStates.js index 2b93668..9880373 100644 --- a/moonlight/src/GameStates.js +++ b/moonlight/src/GameStates.js @@ -511,7 +511,12 @@ var Boot = function(game) { Boot.prototype.preload = function() { - game.load.image('preloader', 'gfx/ui/preloader.png'); + game.load.image('background', 'gfx/ui/background.png'); + game.load.image('font-16px', 'gfx/ui/font-16px.png'); + game.load.image('font-8px', 'gfx/ui/font-8px.png'); + game.load.image('lightbar', 'gfx/ui/lightbar.png'); + game.load.image('loadingtube', 'gfx/ui/loadingtube.png'); + game.load.spritesheet('gears', 'gfx/ui/gears.png', 128, 128, 10); }; Boot.prototype.create = function() @@ -527,11 +532,28 @@ var Preloader = function(game) { Preloader.prototype.preload = function() { - this.preloadBar = game.add.sprite(0, 0, 'preloader'); - this.preloadBar.anchor.setTo(0.5, 0.5); - this.preloadBar.x = game.camera.x + (game.camera.width / 2); - this.preloadBar.y = game.camera.y + (game.camera.width / 2); - game.load.setPreloadSprite(this.preloadBar, 0); + this.background = game.add.image(0, 0, 'background'); + this.loadingText = textImage(game.world.centerX, + game.world.centerY, + "Loading...", + FONTSIZE_MEDIUM); + this.loadingText.anchor.setTo(0.5, 0.5); + this.creditText = textImage(game.world.centerX, + 480 - 16, + "Featuring Art by Peter Hann (www.peter-hann.com)", + FONTSIZE_SMALL); + this.creditText.anchor.setTo(0.5, 0.5); + this.preloadTube = game.add.image(game.world.centerX, 280, 'loadingtube'); + this.preloadTube.anchor.setTo(0.5, 0.5); + this.loadingGears = game.add.sprite(game.world.centerX - (193/2) - 72, + game.world.centerY - 112, + 'gears'); + addAnimation(this.loadingGears, 'spingears'); + this.loadingGears.animations.play('spingears'); + this.lightbar = game.add.image(game.world.centerX - (193/2) + 32, + 280 - 18, + 'lightbar'); + game.load.setPreloadSprite(this.lightbar, 0); for (var k in moonlightSettings['map']['tilesets']) { var ts = moonlightSettings['map']['tilesets'][k]; @@ -559,11 +581,20 @@ Preloader.prototype.preload = function() Preloader.prototype.create = function() { function goalready() { - this.preloadBar.destroy(); + this.lightbar.destroy(); + this.background.destroy(); + this.preloadTube.destroy(); + this.loadingText.destroy(); + this.loadingGears.destroy(); game.state.start('startscreen', true, false); } - var tween = this.add.tween(this.preloadBar).to({ alpha: 0 }, 1000, Phaser.Easing.Linear.None, true); + var tween = this.add.tween(this.lightbar).to({ alpha: 0 }, 5000, Phaser.Easing.Linear.None, true); + tween = this.add.tween(this.preloadTube).to({ alpha: 0 }, 4500, Phaser.Easing.Linear.None, true); + tween = this.add.tween(this.loadingText).to({ alpha: 0 }, 4000, Phaser.Easing.Linear.None, true); + tween = this.add.tween(this.creditText).to({ alpha: 0 }, 4000, Phaser.Easing.Linear.None, true); + tween = this.add.tween(this.loadingGears).to({ alpha: 0 }, 4000, Phaser.Easing.Linear.None, true); + tween = this.add.tween(this.background).to({ alpha: 0 }, 3500, Phaser.Easing.Linear.None, true); tween.onComplete.add(goalready, this); } @@ -572,6 +603,7 @@ var StartScreen = function(game) { StartScreen.prototype.create = function() { + this.background = game.add.image(0, 0, 'background'); this.labeltext = bitmapText("(C) 2014 Andrew Kesterson - http://akesterson.itch.io/", FONTSIZE_SMALL); this.linkButton = game.add.button(game.world.centerX, @@ -597,6 +629,14 @@ StartScreen.prototype.create = function() 1, 0); this.creditsButton.anchor.setTo(0.5, 0.5); + this.startGameButton.alpha = 0; + this.creditsButton.alpha = 0; + this.linkButton.alpha = 0; + + var tween = this.add.tween(this.startGameButton).to({ alpha: 1.0 }, 3000, Phaser.Easing.Linear.None, true); + tween = this.add.tween(this.creditsButton).to({ alpha: 1.0 }, 3000, Phaser.Easing.Linear.None, true); + tween = this.add.tween(this.linkButton).to({ alpha: 1.0 }, 3000, Phaser.Easing.Linear.None, true); + tween = this.add.tween(this.background).to({ alpha: 1.0 }, 3000, Phaser.Easing.Linear.None, true); } StartScreen.prototype.linkClicked = function() @@ -608,6 +648,9 @@ StartScreen.prototype.startGameClicked = function() { this.startGameButton.destroy(); this.creditsButton.destroy(); + this.background.destroy(); + this.linkButton.destroy(); + this.labeltext.destroy(); game.state.start('game', true, false); } diff --git a/moonlight/src/Settings.js b/moonlight/src/Settings.js index e3afab7..52172d3 100644 --- a/moonlight/src/Settings.js +++ b/moonlight/src/Settings.js @@ -151,14 +151,6 @@ var moonlightSettings = { 'name': 'font-32px', 'path': 'gfx/ui/font-32px.png' }, - { - 'name': 'font-16px', - 'path': 'gfx/ui/font-16px.png' - }, - { - 'name': 'font-8px', - 'path': 'gfx/ui/font-8px.png' - }, { 'name': 'gameover', 'path': 'gfx/ui/gameover.png' @@ -171,10 +163,6 @@ var moonlightSettings = { 'name': 'clock_overlay', 'path': 'gfx/ui/clock_overlay.png' }, - { - 'name': 'lightbar', - 'path': 'gfx/ui/lightbar.png' - }, { 'name': 'wordbubble', 'path': 'gfx/effects/wordbubble.png' @@ -316,6 +304,12 @@ var moonlightSettings = { } ], 'animations': { + 'spingears': { + 'frames': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + 'speed': 2, + 'loop': true, + 'reverse': true + }, 'glint': { 'frames': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 'speed': 12, diff --git a/moonlight/src/Util.js b/moonlight/src/Util.js index 6faacd8..cd103de 100644 --- a/moonlight/src/Util.js +++ b/moonlight/src/Util.js @@ -121,7 +121,7 @@ function nearestWalkableTile(spr) function addAnimation(obj, anim) { a = moonlightSettings['animations'][anim] - obj.animations.add(anim, a['frames'], a['speed'], a['loop']) + obj.animations.add(anim, a['frames'], a['speed'], a['loop']); } function getAwarenessState(spr)