games/spacetac
games/spacetac
1
0
Fork 0
Code Releases Activity

Split assets to avoid loading unnecessary ones

Browse source
This commit is contained in:
Michaël Lemaire 2017-10-08 23:25:24 +02:00
parent 58b166a351
commit 74acbeb827
10 changed files with 219 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
out/assets/images/preload/bar-background.png
View file

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
out/assets/images/preload/bar-content.png
View file

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

2
src/MainUI.ts
View file

@ -38,7 +38,7 @@ module TK.SpaceTac {
this.state.onStateChange.add((state: string) => console.log(`View change: ${state}`));
this.state.add('boot', UI.Boot);
this.state.add('preload', UI.Preload);
this.state.add('loading', UI.AssetLoading);
this.state.add('mainmenu', UI.MainMenu);
this.state.add('router', UI.Router);
this.state.add('battle', UI.BattleView);

18
src/ui/AssetLoading.spec.ts Normal file
View file

@ -0,0 +1,18 @@
/// <reference path="TestGame.ts" />
module TK.SpaceTac.UI.Specs {
describe("AssetLoading", () => {
let testgame = setupSingleView(testgame => [new AssetLoading(), []]);
it("loads correctly", function () {
expect(testgame.ui.state.current).toEqual("test");
// TODO test asset loading
});
it("builds cache keys from path", function () {
expect(AssetLoading.getKey("dir/file-path")).toEqual("dir-file-path");
expect(AssetLoading.getKey("dir/file-path.ext")).toEqual("dir-file-path");
expect(AssetLoading.getKey("dir/file-path.mp3")).toEqual("dir-file-path");
});
});
}

171
src/ui/AssetLoading.ts Normal file
View file

@ -0,0 +1,171 @@
/// <reference path="BaseView.ts"/>
module TK.SpaceTac.UI {
export enum AssetLoadingRange {
NONE,
MENU,
BATTLE,
CAMPAIGN
}
/**
* Loader of all game assets
*/
export class AssetLoading extends BaseView {
private static loaded = AssetLoadingRange.NONE
private required = AssetLoadingRange.NONE
/**
* Check if an asset range is loaded
*/
static isRangeLoaded(game: Phaser.Game, range: AssetLoadingRange): boolean {
if (range > AssetLoading.loaded) {
return false;
} else {
return true;
}
}
init(range = AssetLoadingRange.NONE) {
super.init();
this.required = range;
}
preload() {
let text = this.add.text(this.getMidWidth(), 400, "... loading ...", { font: "bold 40pt SpaceTac", fill: "#529aee" });
text.anchor.set(0.5);
let bg = this.add.image(678, 570, "preload-background");
let bar = this.add.image(678, 570, "preload-bar");
this.load.setPreloadSprite(bar);
if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {
console.log("Loading menu assets");
this.loadSound("ui/button-down.wav");
this.loadSound("ui/button-up.wav");
this.loadSound("ui/button-click.wav");
this.loadSound("ui/dialog-open.wav");
this.loadSound("ui/dialog-close.wav");
this.loadSheet("options/options.png", 128, 128);
this.loadSheet("common/particles.png", 32);
this.loadImage("common/transparent.png");
this.loadImage("common/debug.png");
this.loadAnimation("common/waiting.png", 128, 128, 6);
this.loadImage("common/arrow.png");
this.loadImage("common/button-ok.png");
this.loadImage("common/button-cancel.png");
this.loadImage("common/dialog.png");
this.loadSheet("common/dialog-textbutton.png", 316, 59);
this.loadSheet("common/dialog-close.png", 92, 82);
this.loadImage("menu/title.png");
this.loadImage("menu/button.png");
this.loadImage("menu/button-hover.png");
this.loadImage("menu/load-bg.png");
this.loadSound("music/supernatural.mp3");
}
if (this.required >= AssetLoadingRange.BATTLE && AssetLoading.loaded < AssetLoadingRange.BATTLE) {
console.log("Loading battle assets");
// TODO automatic range
range(3).forEach(i => this.loadAtlas(i + 1));
this.loadImage("options/background.png");
this.loadSheet("options/button.png", 497, 134);
this.loadSheet("options/toggle.png", 149, 149);
this.loadSheet("battle/splash/base.png", 853, 210);
this.loadSheet("battle/splash/shipcard.png", 99, 114);
this.loadImage("battle/background.jpg");
this.loadImage("battle/actionbar/background.png");
this.loadImage("battle/actionbar/actions-background.png");
this.loadSheet("battle/actionbar/button-menu.png", 79, 132);
this.loadImage("battle/arena/background.png");
this.loadImage("battle/shiplist/background.png");
this.loadImage("battle/shiplist/item-background.png");
this.loadImage("battle/shiplist/damage.png");
this.loadImage("battle/shiplist/hover.png");
this.loadImage("battle/shiplist/info-button.png");
this.loadImage("character/sheet.png");
this.loadImage("character/close.png");
this.loadImage("character/ship.png");
this.loadImage("character/ship-selected.png");
this.loadImage("character/skill-upgrade.png");
this.loadImage("character/cargo-slot.png");
this.loadImage("character/equipment-slot.png");
this.loadSheet("character/slots.png", 52);
this.loadImage("character/upgrade-available.png");
this.loadImage("character/price-tag.png");
this.loadSound("ui/drag.wav");
this.loadSound("ui/drop.wav");
this.loadSound("battle/ship-change.wav");
this.loadSound("battle/weapon-laser.wav");
this.loadSound("battle/weapon-bullets.wav");
this.loadSound("battle/weapon-missile-launch.wav");
this.loadSound("battle/weapon-missile-explosion.wav");
this.loadSound("battle/drone-deploy.wav");
this.loadSound("battle/drone-destroy.wav");
this.loadSound("battle/drone-activate.wav");
this.loadSound("music/mechanolith.mp3");
}
if (this.required >= AssetLoadingRange.CAMPAIGN && AssetLoading.loaded < AssetLoadingRange.CAMPAIGN) {
console.log("Loading campaign assets");
this.loadImage("map/starsystem-background.png");
this.loadImage("map/name.png");
this.loadImage("map/subname.png");
this.loadSheet("map/action.png", 323, 192);
this.loadImage("map/orbit.png");
this.loadImage("map/boundaries.png");
this.loadSheet("map/buttons.png", 115, 191);
this.loadSheet("map/mission-action.png", 192, 56);
this.loadSound("music/division.mp3");
this.loadSound("music/spring-thaw.mp3");
}
this.load.start();
}
create() {
super.create();
AssetLoading.loaded = Math.max(AssetLoading.loaded, this.required);
this.game.state.start("router");
}
static getKey(path: string): string {
return path.replace(/\//g, "-").replace(/\.[a-z0-9]+$/, '');
}
loadAtlas(index: number) {
this.load.atlasJSONHash(`atlas-${index}`, `assets/atlas-${index}.png`, `assets/atlas-${index}.json`);
}
loadSheet(path: string, frame_width: number, frame_height = frame_width) {
this.load.spritesheet(AssetLoading.getKey(path), "assets/images/" + path, frame_width, frame_height);
}
loadAnimation(path: string, frame_width: number, frame_height = frame_width, count?: number) {
this.load.spritesheet(AssetLoading.getKey(path), "assets/images/" + path, frame_width, frame_height, count);
}
loadImage(path: string) {
this.load.image(AssetLoading.getKey(path), "assets/images/" + path);
}
loadSound(path: string) {
this.load.audio(AssetLoading.getKey(path), "assets/sounds/" + path);
}
}
}

2
src/ui/BaseView.ts
View file

@ -203,7 +203,7 @@ module TK.SpaceTac.UI {
while (this.game.cache.checkImageKey(`atlas-${i}`)) {
let data = this.game.cache.getFrameData(`atlas-${i}`);
let frames = data.getFrames();
let frame = first(frames, frame => Preload.getKey(frame.name) == `graphics-exported-${name}`);
let frame = first(frames, frame => AssetLoading.getKey(frame.name) == `graphics-exported-${name}`);
if (frame) {
return { key: `atlas-${i}`, frame: frame.index };
}

10
src/ui/Boot.ts
View file

@ -1,4 +1,9 @@
module TK.SpaceTac.UI {
/**
* First view to boot.
*
* It is responsible to prepare the screen, and the asset loading.
*/
export class Boot extends Phaser.State {
preload() {
this.load.image("preload-background", "assets/images/preload/bar-background.png");
@ -6,13 +11,14 @@ module TK.SpaceTac.UI {
}
create() {
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.stage.backgroundColor = 0x000000;
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.input.maxPointers = 1;
this.add.image(678, 426, "preload-background");
this.game.state.start("preload");
this.game.state.start("router");
}
}
}

19
src/ui/Preload.spec.ts
View file

@ -1,19 +0,0 @@
/// <reference path="TestGame.ts" />
/// <reference path="Preload.ts" />
module TK.SpaceTac.UI.Specs {
describe("Preload", () => {
let testgame = setupSingleView(testgame => [new Preload(), []]);
it("loads correctly", function () {
expect(testgame.ui.state.current).toEqual("test");
// TODO test asset loading
});
it("builds cache keys from path", function () {
expect(Preload.getKey("dir/file-path")).toEqual("dir-file-path");
expect(Preload.getKey("dir/file-path.ext")).toEqual("dir-file-path");
expect(Preload.getKey("dir/file-path.mp3")).toEqual("dir-file-path");
});
});
}

121
src/ui/Preload.ts
View file

@ -1,121 +0,0 @@
/// <reference path="BaseView.ts"/>
module TK.SpaceTac.UI {
export class Preload extends BaseView {
private preloadBar: Phaser.Image;
preload() {
// Add preload sprite
let bg = this.add.image(678, 426, "preload-background");
this.preloadBar = this.add.image(684, bg.y + 166, "preload-bar");
this.load.setPreloadSprite(this.preloadBar);
// Load images
this.loadSheet("common/particles.png", 32);
this.loadImage("common/transparent.png");
this.loadImage("common/debug.png");
this.loadAnimation("common/waiting.png", 128, 128, 6);
this.loadImage("common/arrow.png");
this.loadImage("common/button-ok.png");
this.loadImage("common/button-cancel.png");
this.loadImage("common/dialog.png");
this.loadSheet("common/dialog-textbutton.png", 316, 59);
this.loadSheet("common/dialog-close.png", 92, 82);
this.loadImage("menu/title.png");
this.loadImage("menu/button.png");
this.loadImage("menu/button-hover.png");
this.loadImage("menu/load-bg.png");
this.loadImage("options/background.png");
this.loadSheet("options/button.png", 497, 134);
this.loadSheet("options/options.png", 128, 128);
this.loadSheet("options/toggle.png", 149, 149);
this.loadSheet("battle/splash/base.png", 853, 210);
this.loadSheet("battle/splash/shipcard.png", 99, 114);
this.loadImage("battle/background.jpg");
this.loadImage("battle/actionbar/background.png");
this.loadImage("battle/actionbar/actions-background.png");
this.loadSheet("battle/actionbar/button-menu.png", 79, 132);
this.loadImage("battle/arena/background.png");
this.loadImage("battle/shiplist/background.png");
this.loadImage("battle/shiplist/item-background.png");
this.loadImage("battle/shiplist/damage.png");
this.loadImage("battle/shiplist/hover.png");
this.loadImage("battle/shiplist/info-button.png");
this.loadImage("map/starsystem-background.png");
this.loadImage("map/name.png");
this.loadImage("map/subname.png");
this.loadSheet("map/action.png", 323, 192);
this.loadImage("map/orbit.png");
this.loadImage("map/boundaries.png");
this.loadSheet("map/buttons.png", 115, 191);
this.loadSheet("map/mission-action.png", 192, 56);
this.loadImage("character/sheet.png");
this.loadImage("character/close.png");
this.loadImage("character/ship.png");
this.loadImage("character/ship-selected.png");
this.loadImage("character/skill-upgrade.png");
this.loadImage("character/cargo-slot.png");
this.loadImage("character/equipment-slot.png");
this.loadSheet("character/slots.png", 52);
this.loadImage("character/upgrade-available.png");
this.loadImage("character/price-tag.png");
// Load image atlases
// TODO automatic range
range(3).forEach(i => this.loadAtlas(i + 1));
// Load sounds
this.loadSound("ui/button-down.wav");
this.loadSound("ui/button-up.wav");
this.loadSound("ui/button-click.wav");
this.loadSound("ui/dialog-open.wav");
this.loadSound("ui/dialog-close.wav");
this.loadSound("ui/drag.wav");
this.loadSound("ui/drop.wav");
this.loadSound("battle/ship-change.wav");
this.loadSound("battle/weapon-laser.wav");
this.loadSound("battle/weapon-bullets.wav");
this.loadSound("battle/weapon-missile-launch.wav");
this.loadSound("battle/weapon-missile-explosion.wav");
this.loadSound("battle/drone-deploy.wav");
this.loadSound("battle/drone-destroy.wav");
this.loadSound("battle/drone-activate.wav");
// Load musics
this.loadSound("music/division.mp3");
this.loadSound("music/mechanolith.mp3");
this.loadSound("music/spring-thaw.mp3");
this.loadSound("music/supernatural.mp3");
this.load.start();
}
create() {
this.game.state.start("mainmenu");
}
static getKey(path: string): string {
return path.replace(/\//g, "-").replace(/\.[a-z0-9]+$/, '');
}
loadAtlas(index: number) {
this.load.atlasJSONHash(`atlas-${index}`, `assets/atlas-${index}.png`, `assets/atlas-${index}.json`);
}
loadSheet(path: string, frame_width: number, frame_height = frame_width) {
this.load.spritesheet(Preload.getKey(path), "assets/images/" + path, frame_width, frame_height);
}
loadAnimation(path: string, frame_width: number, frame_height = frame_width, count?: number) {
this.load.spritesheet(Preload.getKey(path), "assets/images/" + path, frame_width, frame_height, count);
}
loadImage(path: string) {
this.load.image(Preload.getKey(path), "assets/images/" + path);
}
loadSound(path: string) {
this.load.audio(Preload.getKey(path), "assets/sounds/" + path);
}
}
}

26
src/ui/Router.ts
View file

@ -1,5 +1,11 @@
module TK.SpaceTac.UI {
// Router to other states
/**
* Router to other views
*
* It will go to the expected view, by examining the current game session.
*
* If needed, it will go back to the asset loading state.
*/
export class Router extends Phaser.State {
create() {
var ui = <MainUI>this.game;
@ -7,20 +13,28 @@ module TK.SpaceTac.UI {
if (!session) {
// No session, go back to main menu
this.game.state.start("mainmenu", true, false);
this.goToState("mainmenu", AssetLoadingRange.MENU);
} else if (session.getBattle()) {
// A battle is raging, go to it
this.game.state.start("battle", true, false, session.player, session.getBattle());
this.goToState("battle", AssetLoadingRange.BATTLE, session.player, session.getBattle());
} else if (session.hasUniverse()) {
if (session.isFleetCreated()) {
// Go to the universe map
this.game.state.start("universe", true, false, session.universe, session.player);
this.goToState("universe", AssetLoadingRange.CAMPAIGN, session.universe, session.player);
} else {
this.game.state.start("intro", true, false);
this.goToState("intro", AssetLoadingRange.CAMPAIGN);
}
} else {
// No battle, no universe, go back to menu
this.game.state.start("mainmenu", true, false);
this.goToState("mainmenu", AssetLoadingRange.MENU);
}
}
goToState(name: string, asset_range: AssetLoadingRange, ...args: any[]) {
if (AssetLoading.isRangeLoaded(this.game, asset_range)) {
this.game.state.start(name, true, false, ...args);
} else {
this.game.state.start("loading", true, false, asset_range);
}
}
}