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/GameStates.js"></script>
<script type="text/javascript" src="src/main.js"></script>
<div id="uiGameContainer">
<table>
<tr>
<td>
<img src="gfx/ui/uiGameDisplayBorder.png">
<div id="uiGameDisplay">
</div>
</td>
<td>
<div align="center">
<center>
<div id="uiGameDisplay">
</div>
<table>
<tr>
<td>
<br/>Audio Volume
</td>
<td>
<br/><input type="range" id="uiMusicVolume" min="1" max="100" value="75"/>
</td>
</tr>
<tr>
<td>
<br/>Brightness
</td>
<td>
<br/><input type="range" id="uiGamma" min="1" max="30" value="0"/>
</div>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</center>
<div id="__stringSize">
</div>
</body>

6
moonlight/moonlight.css
View File

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

2
moonlight/src/Constants.js
View File

@@ -1,7 +1,7 @@
SCREEN_WIDTH = 640;
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;
SPEED_WALKING = 8;

35
moonlight/src/GameStates.js
View File

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

4
moonlight/src/Settings.js
View File

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