collector_game/world_menu.js

/* main menu, with one start button */
class WorldMenu extends World {

	/* assets that are available to this world */
	assets() {
		return [
			"images/button_start.png",
			"images/menu_background.png",
			"images/volume_yes.png",
			"images/volume_no.png",
		];
	}

	/* assets are loaded, initialize interface */
	start() {

		/* array holding the buttons's sprites */
		this.buttons = new Object();

		/* start button */
		this.buttons["start"] = new PIXI.Sprite( loader.resources["images/button_start.png"].texture );
		this.buttons["start"].position.set( width/2 -this.buttons["start"].width/2,
			height -this.buttons["start"].height -20 );
		app.stage.addChild(this.buttons["start"]);

		/* mute button */
		this.buttons["mute"] = new PIXI.Sprite( loader.resources["images/volume_yes.png"].texture );
		this.buttons["mute"].position.set( 10, height -this.buttons["mute"].height -10 );
		this.update_mute_button();
		app.stage.addChild(this.buttons["mute"]);

		/* background image */
		this.bg = new PIXI.Sprite( loader.resources["images/menu_background.png"].texture );
		app.stage.addChildAt(this.bg, 0);

		/* title text */
		let style = new PIXI.TextStyle({
			fill: "#777777",
			stroke: "#210510",
			strokeThickness: 4,
			fontSize: 70,
			fontWeight: "bold",
		});
		this.text = new PIXI.Text("The Collector", style);
		this.text.position.set(width/2, 75);
		this.text.anchor = {x: 0.5, y: 0.5};
		app.stage.addChild(this.text);

		/* main theme, repeat endlessly */
		this.theme = new Audio("audio/collector_main.mp3");
		this.theme.addEventListener('ended', function() {
			this.currentTime = 0;
			this.play();
		}, false);
		if (!muted) {
			this.theme.play();
		}

		/* button sound */
		this.sound_button = new Audio("audio/button_click.mp3");

		/* closing animation */
		this.anim_close = new Animation(15);
		this.next_world = -1;

		/* rectangle to fade out animation */
		this.fade = new PIXI.Graphics();
		this.fade.beginFill(0x000000);
		this.fade.drawRect(0, 0, width, height);
		this.fade.endFill();
		this.fade.alpha = 1;
		app.stage.addChild(this.fade);
		this.anim_close.start();

	} /* start */

	/* called once per frame */
	update() {

		/* closing animation is running */
		if (this.anim_close.update()) {

			/* animation ended */
			if (!this.anim_close.is_running()) {

				/* was closing animation */
				if (this.anim_close.timer == 0) {

					/* stop theme song */
					this.theme.pause();

					/* return new world to be opened */
					return this.next_world;

				}
				/* was opening animation */
				else {
					/* hide rectangle */
					this.fade.visible = false;

					/* update nothing */
					return -1;
				}

			} /* animation end */

			/* make volume fade out and black screen fade in */
			this.theme.volume = this.anim_close.interpolate(1);
			this.fade.alpha = 1 -this.anim_close.interpolate(1);

			/* while world is closing, input and updating are both ignored */
			return -1;

		} /* closing animation */

		/* handle input */
		for (let i = 0; i < input.length; i++) {

			/* left button was clicked */
			if (input[i].which == 1) {

				/* point of click */
				let click = new PIXI.Point(input[i].offsetX, input[i].offsetY);

				/* start button was clicked */
				if (this.buttons["start"].containsPoint(click)) {

					/* make sound */
					if (!muted) {
						this.sound_button.play();
					}

					/* start closing animation and save WorldGame as next world */
					this.anim_close.start();
					this.fade.visible = true;
					this.next_world = world_list.indexOf(WorldGame);

					/* every input can only trigger one button */
					continue;

				} /* start button clicked */

				/* mute button clicked - toggle mute */
				if (this.buttons["mute"].containsPoint(click)){
					if (muted) {
						this.theme.play();
						muted = false;
					}
					else {
						this.theme.pause();
						muted = true;
					}

					/* update mute button graphic */
					this.update_mute_button();

					/* each input can only trigger one button */
					continue;

				} /* mute button clicked */

			} /* left click event */

		} /* for every input */

	} /* update */

	/* changes appearence of mute button based on if the game
	 * is muted or not
	 */
	update_mute_button() {
		if (muted) {
			this.buttons["mute"].texture =
				loader.resources["images/volume_no.png"].texture;
		}
		else {
			this.buttons["mute"].texture =
				loader.resources["images/volume_yes.png"].texture;
		}
	} /* update mute button */

}