Added audio and brightness controls, also added some crappy UI graphics to the index page

This commit is contained in:
2014-06-26 21:55:58 -07:00
parent b1587926ab
commit 4f8a09581d
7 changed files with 51 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 285 KiB

View File

@@ -3,14 +3,10 @@
<head>
<meta charset="UTF-8" />
<title>Moonlight Skulk (Working Title)</title>
<link rel="stylesheet" type="text/css" href="moonlight.css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/phaser.js"></script>
<script type="text/javascript" src="js/pathfinding-browser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript" src="src/Constants.js"></script>
@@ -23,6 +19,23 @@
<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">
<img src="gfx/ui/uiGameDisplayBorder.png">
<div id="uiGameDisplay">
</div>
<div>
<table>
<tr>
<td><strong>Audio Volume</strong></td>
<td><input type="range" id="uiMusicVolume" min="1" max="100" value="75"/></td>
</tr>
<tr>
<td><strong>Brightness</strong></td>
<td><input type="range" id="uiGamma" min="1" max="60" value="0"/></td>
</tr>
</table>
</div>
</div>
<div id="__stringSize">
</div>
</body>

18
moonlight/moonlight.css Normal file
View File

@@ -0,0 +1,18 @@
body {
margin: 0;
background-color: #000000;
color: #c8c8c8;
text-align: center;
width: 800px;
align: center;
}
#uiGameContainer {
position: absolute;
}
#uiGameDisplay {
position: absolute;
top: 60px;
left: 55px;
}

View File

@@ -126,7 +126,11 @@ GameState.prototype.create = function()
GameState.prototype.updateShadowTexture = function() {
var cv = this.shadowTextureColor;
this.shadowTexture.context.fillStyle = "rgb(" + cv[0] + "," + cv[1] + "," + cv[2] + ")";
var uigamma = parseInt(getDOMValue("uiGamma"));
this.shadowTexture.context.fillStyle = ("rgb(" + (cv[0]+uigamma) +
"," + (cv[1]+uigamma) +
"," + (cv[2]+uigamma) + ")"
);
this.shadowTexture.context.fillRect(0, 0, game.world.width, game.world.height);
this.staticLights.forEach(function(light) {
@@ -203,7 +207,8 @@ GameState.prototype.check_input = function()
}
GameState.prototype.update_player_lightmeter = function() {
player.lightmeter = (Number(array_average(this.shadowTextureColor)) / 255.0);
var avg_shadow = Number(array_average(this.shadowTextureColor));
player.lightmeter = ((avg_shadow) / 255.0);
lightValue = 0;
this.staticLights.forEach(function(light) {
var left = player.x;

View File

@@ -54,8 +54,9 @@ SoundSprite.prototype.update_new_values = function() {
}
SoundSprite.prototype.adjust_relative_to = function(spr) {
var adjustment = 1.0 - Number(parseInt(getDOMValue("uiMusicVolume"))) / 100.0;
if ( this.sound_nofade == true ) {
this.sound.volume = this.sound_volume;
this.sound.volume = Math.min(0, this.sound_volume - adjustment);
return;
}
@@ -72,7 +73,7 @@ SoundSprite.prototype.adjust_relative_to = function(spr) {
var hyp = Math.sqrt(Number(xd * xd) + Number(yd * yd));
this.sound.volume = (1.0 - Number(hyp / this.sound_distance));
this.sound.volume = (1.0 - adjustment - Number(hyp / this.sound_distance));
// Math.max doesn't work here??
if ( this.sound.volume < 0 )
this.sound.volume = 0;

View File

@@ -306,3 +306,7 @@ function isSet(x)
return ( (typeof x !== 'undefined') &&
( x !== null ) );
}
function getDOMValue(name) {
return document.getElementById(name).value
}

View File

@@ -2,7 +2,7 @@
var pathfinder = null;
var pathfinder_grid = null;
var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, '');
var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, 'uiGameDisplay');
game.state.add('boot', Boot, false);
game.state.add('preloader', Preloader, false);