Alamantus
/
Trade-Winds
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move all GUI to sheets, move all GUI Drawing to guiControl object.

This commit is contained in:
Robbie Antenesse 2016-04-26 13:26:02 -06:00
parent c81d094094
commit 98a02a38ac
25 changed files with 122 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
gui/inventoryGUI.js
View File

@ -1,17 +1,17 @@
function inventoryGUI() {
guiControl.inventory = {
screen: "main",
cursorPosition: 0,
show: false,
activateDelay: 0
}
function inventoryGUI() {}
guiControl.inventory = {
screen: "main",
cursorPosition: 0,
show: false,
activateDelay: 0
}
function drawInventoryGUI() {
guiControl.inventory.Draw = function () {
if (guiControl.inventory && guiControl.inventory.show) {
guiControl.inventory.activateDelay -= (guiControl.inventory.activateDelay > 0) ? 1 : 0;
OS.context.drawImage(guiControl.background, 0, 0, 240, 240, pixel(2), pixel(2), 240, 240);
guiControl.drawGUIBackground();
if (ct_down().down) {
snd_cursordown.Play();
@ -51,7 +51,7 @@ function drawInventoryGUI() {
guiControl.drawPixelText("Close", guiControl.leftBorder, guiControl.rowTop(3) + pixel(), 8, "black", 6);
// Draw cursor
OS.context.drawImage(guiControl.cursor, guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(guiControl.inventory.cursorPosition));
guiControl.drawCursor(guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(guiControl.inventory.cursorPosition));
// Button Action
if (guiControl.inventory.activateDelay <= 0) {
@ -117,7 +117,7 @@ function drawInventoryGUI() {
guiControl.drawPixelText("Back", guiControl.leftBorder, guiControl.rowTop(4) - pixel(3), 8, "black", 6);
// Draw cursor
OS.context.drawImage(guiControl.cursor, guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(4) - pixel(4));
guiControl.drawCursor(guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(4) - pixel(4));
// Button Action
if (guiControl.inventory.activateDelay <= 0) {
@ -152,7 +152,7 @@ function drawInventoryGUI() {
guiControl.drawPixelText("Back", guiControl.leftBorder, guiControl.rowTop(4) - pixel(3), 8, "black", 6);
// Draw cursor
OS.context.drawImage(guiControl.cursor, guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(4) - pixel(4));
guiControl.drawCursor(guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(4) - pixel(4));
// Button Action
if (guiControl.inventory.activateDelay <= 0) {

14
gui/mapGUI.js
View File

@ -1,15 +1,15 @@
function mapGUI() {
guiControl.map = {
show: false,
activateDelay: 0
}
function mapGUI() {}
guiControl.map = {
show: false,
activateDelay: 0
}
function drawMapGUI() {
guiControl.map.Draw = function () {
if (guiControl.map && guiControl.map.show) {
guiControl.map.activateDelay -= (guiControl.map.activateDelay > 0) ? 1 : 0;
OS.context.drawImage(guiControl.background, 0, 0, 240, 240, pixel(2), pixel(2), 240, 240);
guiControl.drawGUIBackground();
// Title
guiControl.drawPixelText("Map", guiControl.leftBorder + pixel(10), guiControl.topOfBackground, 8, "black", 6);

28
gui/titleScreen.js
View File

@ -1,20 +1,20 @@
function titleScreen () {
guiControl.title = {
screen: "main",
show: true,
cursorPosition: 0,
activateDelay: 0,
function titleScreen () {}
padding: pixel(2),
leftBorder: pixel(12),
guiControl.title = {
screen: "main",
show: true,
cursorPosition: 0,
activateDelay: 0,
rowTop: function (rowNumber) {
return pixel(32) + pixel(2) + pixel((guiControl.iconSize + 2) * rowNumber);
}
padding: pixel(2),
leftBorder: pixel(12),
rowTop: function (rowNumber) {
return pixel(32) + pixel(2) + pixel((guiControl.iconSize + 2) * rowNumber);
}
}
function drawTitleScreen() {
guiControl.title.Draw = function () {
if (guiControl.title && guiControl.title.show) {
guiControl.title.activateDelay -= (guiControl.title.activateDelay > 0) ? 1 : 0;
@ -38,7 +38,7 @@ function drawTitleScreen() {
}
// Title
OS.context.drawImage(guiControl.titleImage, 0, 0);
guiControl.drawTitleImage();
// New Game
guiControl.drawPixelText("New Game", guiControl.title.leftBorder, guiControl.title.rowTop(0), 10, "white", 6);
@ -48,7 +48,7 @@ function drawTitleScreen() {
guiControl.drawPixelText("Options", guiControl.title.leftBorder, guiControl.title.rowTop(2) + pixel(), 8, (guiControl.optionsScreen) ? "white" : "black", 6);
// Draw cursor
OS.context.drawImage(guiControl.cursor, guiControl.title.leftBorder - (guiControl.iconScaled), guiControl.title.rowTop(guiControl.title.cursorPosition));
guiControl.drawCursor(guiControl.title.leftBorder - (guiControl.iconScaled), guiControl.title.rowTop(guiControl.title.cursorPosition));
// Button Action
if (guiControl.title.activateDelay <= 0) {

38
gui/tradeGUI.js
View File

@ -1,24 +1,24 @@
function tradeGUI() {
guiControl.trade = {
screen: "main", // "main", "buy", "sell", "gossip"
cursorPosition: 0,
page: 0, // horizontal page on item lists. Base 1 to match number of pages var "pages" within the gui.
itemsPerPage: 3,
show: false,
activateDelay: 0,
function tradeGUI() {}
island: null,
guiControl.trade = {
screen: "main", // "main", "buy", "sell", "gossip"
cursorPosition: 0,
page: 0, // horizontal page on item lists. Base 1 to match number of pages var "pages" within the gui.
itemsPerPage: 3,
show: false,
activateDelay: 0,
padding: pixel(2),
leftBorder: pixel(12),
island: null,
rowTop: function (rowNumber) {
return (guiControl.trade.padding + pixel(6) + (guiControl.trade.padding * 3)) + pixel((guiControl.iconSize + 3) * rowNumber);
}
padding: pixel(2),
leftBorder: pixel(12),
rowTop: function (rowNumber) {
return (guiControl.trade.padding + pixel(6) + (guiControl.trade.padding * 3)) + pixel((guiControl.iconSize + 3) * rowNumber);
}
}
function drawTradeGUI() {
guiControl.trade.Draw = function () {
if (guiControl.trade && guiControl.trade.show) {
guiControl.trade.activateDelay -= (guiControl.trade.activateDelay > 0) ? 1 : 0;
// console.log("trade screen island: " + guiControl.trade.island.name);
@ -78,7 +78,7 @@ function drawTradeGUI() {
guiControl.drawPixelText("Leave", guiControl.trade.leftBorder, guiControl.trade.rowTop(3) + pixel(), 8, "black", 6);
// Draw cursor
OS.context.drawImage(guiControl.cursor, guiControl.trade.leftBorder - (guiControl.iconScaled), guiControl.trade.rowTop(guiControl.trade.cursorPosition));
guiControl.drawCursor(guiControl.trade.leftBorder - (guiControl.iconScaled), guiControl.trade.rowTop(guiControl.trade.cursorPosition));
// Button Action
if (guiControl.trade.activateDelay <= 0) {
@ -188,7 +188,7 @@ function drawTradeGUI() {
guiControl.drawPixelText("Back", guiControl.trade.leftBorder, guiControl.trade.rowTop(4) - pixel(2), 8, "black", 6);
// Draw cursor
OS.context.drawImage(guiControl.cursor, guiControl.trade.leftBorder - (guiControl.iconScaled), guiControl.trade.rowTop(guiControl.trade.cursorPosition + 2) - pixel(3));
guiControl.drawCursor(guiControl.trade.leftBorder - (guiControl.iconScaled), guiControl.trade.rowTop(guiControl.trade.cursorPosition + 2) - pixel(3));
// Button Action
if (guiControl.trade.activateDelay <= 0) {
@ -294,7 +294,7 @@ function drawTradeGUI() {
guiControl.drawPixelText("Back", guiControl.trade.leftBorder, guiControl.trade.rowTop(4) - pixel(2), 8, "black", 6);
// Draw cursor
OS.context.drawImage(guiControl.cursor, guiControl.trade.leftBorder - (guiControl.iconScaled), guiControl.trade.rowTop(guiControl.trade.cursorPosition + 2) - pixel(3));
guiControl.drawCursor(guiControl.trade.leftBorder - (guiControl.iconScaled), guiControl.trade.rowTop(guiControl.trade.cursorPosition + 2) - pixel(3));
// Button Action
if (guiControl.trade.activateDelay <= 0) {
@ -428,7 +428,7 @@ function drawTradeGUI() {
guiControl.drawPixelText("Back", guiControl.trade.leftBorder, guiControl.trade.rowTop(4) - pixel(2), 8, "black", 6);
// Draw cursor
OS.context.drawImage(guiControl.cursor, guiControl.trade.leftBorder - (guiControl.iconScaled), guiControl.trade.rowTop(4) - pixel(3));
guiControl.drawCursor(guiControl.trade.leftBorder - (guiControl.iconScaled), guiControl.trade.rowTop(4) - pixel(3));
// Button Action
if (guiControl.trade.activateDelay <= 0) {

BIN
images/alphabet_black_4px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 476 B

BIN
images/alphabet_black_6px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 776 B

BIN
images/alphabet_white_4px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 475 B

BIN
images/alphabet_white_6px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 755 B

BIN
images/alphabet_yellow_4px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 486 B

BIN
images/alphabet_yellow_6px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 778 B

BIN
images/alphabets_sheet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
images/arrows.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 159 B

BIN
images/clock_sheet.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 749 B

BIN
images/guiBackground.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 811 B

BIN
images/guiCursor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 151 B

BIN
images/gui_sheet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
images/icons_sheet.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/items_sheet.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1002 B

BIN
images/sources/alphabets_sheet.xcf Normal file
View File

Binary file not shown.

BIN
images/sources/gui_sheet.xcf Normal file
View File

Binary file not shown.

BIN
images/speed_gauge_sheet.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 283 B

BIN
images/title.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

96
loadGUIs.js
View File

@ -14,6 +14,32 @@ var guiControl = {
iconSize: 8,
iconScaled: pixel(8),
drawEnergyBar: function () {
var percentage = G.stats.energy / G.stats.maxEnergy;
var barHeight = pixel(2);
var maxBarWidth = 32;
var barWidth = pixel(Math.round(maxBarWidth * percentage));
var saveFillStyle = OS.context.fillStyle;
OS.context.fillStyle = "#0055FF";
OS.context.fillRect(64, OS.camera.height - barHeight - pixel(4), barWidth, barHeight);
OS.context.fillStyle = saveFillStyle;
},
drawClock: function () {
var screenX = OS.camera.width - pixel(9) - pixel(2);
var screenY = OS.camera.height - pixel(9) - pixel(2);
var percentOfClock = guiControl.clockTimerCount / guiControl.clockTimerCutoff;
var clockFrameX = guiControl.gui_sheet.clock.x + (Math.floor(pixel(4) * percentOfClock) * pixel(9));
OS.context.drawImage(guiControl.gui_sheet, clockFrameX, guiControl.gui_sheet.clock.y, pixel(9), pixel(9), screenX, screenY, pixel(9), pixel(9));
},
drawSpeedGauge: function () {
var screenX = pixel(4);
var screenY = OS.camera.height - guiControl.iconScaled - pixel(4);
var sheetX = guiControl.gui_sheet.gauge.x + (G.player.currentSpeed * guiControl.iconScaled);
var sheetY = guiControl.gui_sheet.gauge.y;
OS.context.drawImage(guiControl.gui_sheet, sheetX, sheetY, guiControl.iconScaled, guiControl.iconScaled, screenX, screenY, guiControl.iconScaled, guiControl.iconScaled);
},
iconPosition: function (cellPosition) {
return (guiControl.iconScaled * cellPosition);
},
@ -22,46 +48,50 @@ var guiControl = {
},
drawIcon: function (cellX, cellY, xPosition, yPosition) {
OS.context.drawImage(guiControl.icons, guiControl.iconPosition(cellX), guiControl.iconPosition(cellY), guiControl.iconScaled, guiControl.iconScaled, xPosition, yPosition, guiControl.iconScaled, guiControl.iconScaled);
var iconSheetX = guiControl.gui_sheet.icons.x + guiControl.iconPosition(cellX);
var iconSheetY = guiControl.gui_sheet.icons.y + guiControl.iconPosition(cellY);
OS.context.drawImage(guiControl.gui_sheet, iconSheetX, iconSheetY, guiControl.iconScaled, guiControl.iconScaled, xPosition, yPosition, guiControl.iconScaled, guiControl.iconScaled);
},
drawItem: function (itemId, xPosition, yPosition) {
var cellX = itemId % 4;
var cellY = Math.floor(itemId / 4);
OS.context.drawImage(guiControl.itemSheet, guiControl.iconPosition(cellX), guiControl.iconPosition(cellY), guiControl.iconScaled, guiControl.iconScaled, xPosition, yPosition, guiControl.iconScaled, guiControl.iconScaled);
var itemSheetX = guiControl.gui_sheet.items.x + guiControl.iconPosition(cellX);
var itemSheetY = guiControl.gui_sheet.items.y + guiControl.iconPosition(cellY);
OS.context.drawImage(guiControl.gui_sheet, itemSheetX, itemSheetY, guiControl.iconScaled, guiControl.iconScaled, xPosition, yPosition, guiControl.iconScaled, guiControl.iconScaled);
},
drawTitleImage: function () {
OS.context.drawImage(guiControl.gui_sheet, guiControl.gui_sheet.titleImage.x, guiControl.gui_sheet.titleImage.y, guiControl.gui_sheet.titleImage.width, guiControl.gui_sheet.titleImage.height, 0, 0, guiControl.gui_sheet.titleImage.width, guiControl.gui_sheet.titleImage.height);
},
drawGUIBackground: function () {
OS.context.drawImage(guiControl.gui_sheet, guiControl.gui_sheet.guiBackground.x, guiControl.gui_sheet.guiBackground.y, guiControl.gui_sheet.guiBackground.width, guiControl.gui_sheet.guiBackground.height, pixel(2), pixel(2), guiControl.gui_sheet.guiBackground.width, guiControl.gui_sheet.guiBackground.height);
},
drawCursor: function (xPosition, yPosition) {
OS.context.drawImage(guiControl.cursor, xPosition, yPosition);
OS.context.drawImage(guiControl.gui_sheet, guiControl.gui_sheet.guiCursor.x, guiControl.gui_sheet.guiCursor.y, guiControl.iconScaled, guiControl.iconScaled, xPosition, yPosition, guiControl.iconScaled, guiControl.iconScaled);
},
drawPageArrow: function (direction, xPosition, yPosition) {
OS.context.drawImage(guiControl.arrows, (direction == "left") ? 0 : pixel(4), 0, pixel(4), pixel(7), xPosition, yPosition, pixel(4), pixel(7));
var arrowSheetX = guiControl.gui_sheet.arrows.x + ((direction == "left") ? 0 : pixel(4));
OS.context.drawImage(guiControl.gui_sheet, arrowSheetX, guiControl.gui_sheet.arrows.y, pixel(4), pixel(7), xPosition, yPosition, pixel(4), pixel(7));
}
}
guiControl.titleImage = new Image();
guiControl.titleImage.src = "images/title.png";
guiControl.background = new Image();
guiControl.background.src = "images/guiBackground.png";
guiControl.cursor = new Image();
guiControl.cursor.src = "images/guiCursor.png";
guiControl.arrows = new Image();
guiControl.arrows.src = "images/arrows.png";
guiControl.gui_sheet = new Image();
guiControl.gui_sheet.src = "images/gui_sheet.png";
guiControl.gui_sheet.clock = { x: 0, y: 0 };
guiControl.gui_sheet.gauge = { x: 288, y: 132 };
guiControl.gui_sheet.arrows = { x: 256, y: 134 };
guiControl.gui_sheet.guiCursor = { x: 256, y: 164 };
guiControl.gui_sheet.guiBackground = { x: 0, y: 36, width: pixel(61), height: pixel(61) };
guiControl.gui_sheet.titleImage = { x: 0, y: 276, width: pixel(64), height: pixel(33) };
guiControl.gui_sheet.icons = { x: 256, y: 36 };
guiControl.gui_sheet.items = { x: 448, y: 132 };
guiControl.alpha_black4 = new Image();
guiControl.alpha_black4.src = "images/alphabet_black_4px.png";
guiControl.alpha_white4 = new Image();
guiControl.alpha_white4.src = "images/alphabet_white_4px.png";
guiControl.alpha_yellow4 = new Image();
guiControl.alpha_yellow4.src = "images/alphabet_yellow_4px.png";
guiControl.alpha_black6 = new Image();
guiControl.alpha_black6.src = "images/alphabet_black_6px.png";
guiControl.alpha_white6 = new Image();
guiControl.alpha_white6.src = "images/alphabet_white_6px.png";
guiControl.alpha_yellow6 = new Image();
guiControl.alpha_yellow6.src = "images/alphabet_yellow_6px.png";
guiControl.itemSheet = new Image();
guiControl.itemSheet.src = "images/items_sheet.png";
guiControl.icons = new Image();
guiControl.icons.src = "images/icons_sheet.png";
guiControl.alphabet_sheet = new Image();
guiControl.alphabet_sheet.src = "images/alphabets_sheet.png";
guiControl.alphabet_sheet.black4 = { x: 0, y: 0 };
guiControl.alphabet_sheet.black6 = { x: 0, y: 112 };
guiControl.alphabet_sheet.white4 = { x: 96, y: 0 };
guiControl.alphabet_sheet.white6 = { x: 120, y: 112 };
guiControl.alphabet_sheet.yellow4 = { x: 192, y: 0 };
guiControl.alphabet_sheet.yellow6 = { x: 240, y: 112 };
guiControl.drawPixelText = function (text, x, y, wrapWidth, color, size) {
// Draw the text at the given x and y on the canvas using the alphabet images.
@ -76,7 +106,7 @@ guiControl.drawPixelText = function (text, x, y, wrapWidth, color, size) {
wrapWidth = (wrapWidth <= 0 || wrapWidth > maxWrapWidth) ? maxWrapWidth : wrapWidth;
var alphabet = guiControl["alpha_" + color + size.toString()];
// var alphabet = guiControl.alphabet_sheet[color + size.toString()];
// Make words wrap nicely, but let punctuation wrap.
var wordsInText = text.split(" ");
@ -305,10 +335,10 @@ guiControl.drawPixelText = function (text, x, y, wrapWidth, color, size) {
var lineNumber = Math.floor(i/wrapWidth);
var horizontal = i - (wrapWidth * lineNumber);
var letterSheetX = letterSizeX * letterCellX;
var letterSheetY = letterSizeY * letterCellY;
var letterSheetX = guiControl.alphabet_sheet[color + size.toString()].x + (letterSizeX * letterCellX);
var letterSheetY = guiControl.alphabet_sheet[color + size.toString()].y + (letterSizeY * letterCellY);
var letterX = x + (letterSizeX * horizontal) + pixel(horizontal); //Places a space between characters horizontally
var letterY = y + (letterSizeY * lineNumber) + pixel(lineNumber); //Places a space between characters vertically
OS.context.drawImage(alphabet, letterSheetX, letterSheetY, letterSizeX, letterSizeY, letterX, letterY, letterSizeX, letterSizeY);
OS.context.drawImage(guiControl.alphabet_sheet, letterSheetX, letterSheetY, letterSizeX, letterSizeY, letterX, letterY, letterSizeX, letterSizeY);
}
}

5
loadRooms.js
View File

@ -9,11 +9,6 @@ var rm_Ocean = OS.R.Add("Default", {
numberOfIslands: 10,
clockTimerCutoff: ((1 / OS.S.defaultStep) * 60) * 5 // 5 minute day.
});
// Load external GUI here.
rm_Ocean.speedGaugeImg = new Image();
rm_Ocean.speedGaugeImg.src = "images/speed_gauge_sheet.png";
rm_Ocean.clockImg = new Image();
rm_Ocean.clockImg.src = "images/clock_sheet.png";
function loadRooms() {
OS.AddScript("rooms/oceanRoom.js");

36
rooms/oceanRoom.js
View File

@ -82,18 +82,17 @@ rm_Ocean.DrawAbove = function () {
if (G.gameStarted) {
this.DrawNightDarkness();
// Draw the speed indicator in Bottom Left corner.
OS.context.drawImage(rm_Ocean.speedGaugeImg, G.player.currentSpeed * 32, 0, 32, 32, 16, OS.camera.height - 32 - 16, 32, 32);
guiControl.drawSpeedGauge();
this.DrawEnergyBar();
guiControl.drawEnergyBar();
this.DrawClock();
guiControl.drawClock();
drawInventoryGUI();
drawMapGUI();
drawTradeGUI();
guiControl.inventory.Draw();
guiControl.map.Draw();
guiControl.trade.Draw();
} else {
drawTitleScreen();
guiControl.title.Draw();
}
}
@ -140,27 +139,6 @@ rm_Ocean.DrawNightDarkness = function () {
}
}
rm_Ocean.DrawEnergyBar = function () {
var percentage = G.stats.energy / G.stats.maxEnergy;
var barHeight = pixel(2);
var maxBarWidth = 32;
var barWidth = pixel(Math.round(maxBarWidth * percentage));
var saveFillStyle = OS.context.fillStyle;
OS.context.fillStyle = "#0055FF";
OS.context.fillRect(64, OS.camera.height - barHeight - 16, barWidth, barHeight);
OS.context.fillStyle = saveFillStyle;
}
rm_Ocean.DrawClock = function () {
var screenX = OS.camera.width - pixel(9) - pixel(2);
var screenY = OS.camera.height - pixel(9) - pixel(2);
var percentOfClock = this.clockTimerCount / this.clockTimerCutoff;
var clockFrameX = Math.floor(16 * percentOfClock) * pixel(9);
OS.context.drawImage(this.clockImg, clockFrameX, 0, pixel(9), pixel(9), screenX, screenY, pixel(9), pixel(9));
// console.log(this.clockTimerCount);
}
rm_Ocean.GenerateMap = function () {
var xSquares = [25];
var ySquares = [22];