andrew/moonlight-skulk
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reference #42, #41, #39 : Fitting new UI art mockups into place. Moved item spawn locations on top of the new background bar.

Browse Source
This commit is contained in:
Andrew Kesterson
2014-07-11 19:53:38 -07:00
parent b3b3370dbe
commit 2e31517169
6 changed files with 44 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
moonlight/gfx/ui/hud.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

34
moonlight/index.html
View File

@@ -19,26 +19,28 @@
<script type="text/javascript" src="src/SoundSprite.js"></script> <script type="text/javascript" src="src/SoundSprite.js"></script>
<script type="text/javascript" src="src/GameStates.js"></script> <script type="text/javascript" src="src/GameStates.js"></script>
<script type="text/javascript" src="src/main.js"></script> <script type="text/javascript" src="src/main.js"></script>
<div id="uiGameContainer"> <center>
<table> <div id="uiGameDisplay">
<tr> </div>
<td> <table>
<img src="gfx/ui/uiGameDisplayBorder.png"> <tr>
<div id="uiGameDisplay"> <td>
</div>
</td>
<td>
<div align="center">
<br/>Audio Volume <br/>Audio Volume
</td>
<td>
<br/><input type="range" id="uiMusicVolume" min="1" max="100" value="75"/> <br/><input type="range" id="uiMusicVolume" min="1" max="100" value="75"/>
</td>
</tr>
<tr>
<td>
<br/>Brightness <br/>Brightness
</td>
<td>
<br/><input type="range" id="uiGamma" min="1" max="30" value="0"/> <br/><input type="range" id="uiGamma" min="1" max="30" value="0"/>
</div> </td>
</td> </tr>
</tr> </table>
</table> </center>
</div>
</div>
<div id="__stringSize"> <div id="__stringSize">
</div> </div>
</body> </body>

6
moonlight/moonlight.css
View File

@@ -3,7 +3,6 @@ body {
background-color: #000000; background-color: #000000;
color: #c8c8c8; color: #c8c8c8;
text-align: center; text-align: center;
width: 800px;
align: center; align: center;
} }
@@ -12,7 +11,6 @@ body {
} }
#uiGameDisplay { #uiGameDisplay {
position: absolute; position: relative;
top: 60px; align: center;
left: 55px;
} }

2
moonlight/src/Constants.js
View File

@@ -1,7 +1,7 @@
SCREEN_WIDTH = 640; SCREEN_WIDTH = 640;
SCREEN_HEIGHT = 480; SCREEN_HEIGHT = 480;
SCREEN_OFFSET_RECENTLYSTOLEN = new Phaser.Point(400, SCREEN_HEIGHT - 40); SCREEN_OFFSET_RECENTLYSTOLEN = new Phaser.Point(240, SCREEN_HEIGHT - 32);
RECENTLYSTOLEN_MAX = 5; RECENTLYSTOLEN_MAX = 5;
SPEED_WALKING = 8; SPEED_WALKING = 8;

35
moonlight/src/GameStates.js
View File

@@ -118,9 +118,6 @@ GameState.prototype.create = function()
this.recentlyStolenGroup = game.add.group(); this.recentlyStolenGroup = game.add.group();
this.game.time.advancedTiming = true; this.game.time.advancedTiming = true;
this.clockText = this.game.add.text(
20, SCREEN_HEIGHT - 40, '', { font : '16px Arial', fill: '#ffffff' }, this.uigroup
);
this.clock = new Date(); this.clock = new Date();
this.clock.setHours(20, 50, 0, 0); this.clock.setHours(20, 50, 0, 0);
this.clockTimer = game.time.create(true); this.clockTimer = game.time.create(true);
@@ -129,25 +126,31 @@ GameState.prototype.create = function()
this.updateClock, this.updateClock,
this); this);
this.clockTimer.start(); this.clockTimer.start();
this.hud = this.game.add.image(0, game.camera.height - 68, 'hud', 0, this.uigroup);
this.fpsText = this.game.add.text( this.fpsText = this.game.add.text(
20, 20, '', { font: '16px Arial', fill: '#ffffff' }, this.uigroup 20, 20, '', { font: '16px Arial', fill: '#ffffff' }, this.uigroup
); );
this.clockText = this.game.add.text(
20, SCREEN_HEIGHT - 40, '', { font : '16px Arial', fill: '#ffffff' }, this.uigroup
);
this.scoreText = this.game.add.text( this.scoreText = this.game.add.text(
SCREEN_WIDTH - 80, SCREEN_HEIGHT - 40, '', SCREEN_WIDTH - 80, SCREEN_HEIGHT - 30, '',
{ font: '16px Arial', fill: '#ffffff' }, this.uigroup { font: '16px Arial', fill: '#ffffff' }, this.uigroup
); );
this.lightbox = this.game.add.image(game.camera.width / 2 - 50, // this.lightbox = this.game.add.image(game.camera.width / 2 - 50,
game.camera.height - 40, // game.camera.height - 40,
'lightbox', // 'lightbox',
0, // 0,
this.uigroup); // this.uigroup);
this.lightbar = this.game.add.image(this.lightbox.x + 3, // this.lightbar = this.game.add.image(this.lightbox.x + 3,
this.lightbox.y + 3, // this.lightbox.y + 3,
'lightbar', // 'lightbar',
0, // 0,
this.uigroup); // this.uigroup);
this.lightbar_image = game.cache.getImage('lightbar'); this.lightbar_image = game.cache.getImage('lightbar');
this.lightbar_crop = positiveRectangle(0, this.lightbar_crop = positiveRectangle(0,
0, 0,
@@ -281,7 +284,7 @@ GameState.prototype.update_player_lightmeter = function() {
player.lightmeter += lightValue; player.lightmeter += lightValue;
player.lightmeter = Math.min(player.lightmeter, 1.0); player.lightmeter = Math.min(player.lightmeter, 1.0);
this.lightbar_crop.width = ((this.lightbar_image.width) * player.lightmeter); this.lightbar_crop.width = ((this.lightbar_image.width) * player.lightmeter);
this.lightbar.crop(this.lightbar_crop); //this.lightbar.crop(this.lightbar_crop);
} }
GameState.prototype.update = function() GameState.prototype.update = function()
@@ -371,7 +374,7 @@ GameState.prototype.update = function()
this.recentlyStolenGroup.getBottom(), this.recentlyStolenGroup.getBottom(),
true); true);
} }
this.recentlyStolenGroup.addAll('cameraOffset.x', 24); this.recentlyStolenGroup.addAll('cameraOffset.x', 36);
var rs = game.add.sprite( var rs = game.add.sprite(
SCREEN_OFFSET_RECENTLYSTOLEN.x + 12, SCREEN_OFFSET_RECENTLYSTOLEN.x + 12,
SCREEN_OFFSET_RECENTLYSTOLEN.y + 12, SCREEN_OFFSET_RECENTLYSTOLEN.y + 12,

4
moonlight/src/Settings.js
View File

@@ -151,6 +151,10 @@ var moonlightSettings = {
'name': 'lightbox', 'name': 'lightbox',
'path': 'gfx/ui/lightbox.png' 'path': 'gfx/ui/lightbox.png'
}, },
{
'name': 'hud',
'path': 'gfx/ui/hud.png'
},
{ {
'name': 'lightbar', 'name': 'lightbar',
'path': 'gfx/ui/lightbar.png' 'path': 'gfx/ui/lightbar.png'