renge/ShatteredSword
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'github/master'

Browse Source
This commit is contained in:
Renge 2022-04-02 21:45:39 -04:00
commit b8593627bc
14 changed files with 453 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/404.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
<h3>Why am I seeing this?</h3>
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
</div>
</body>
</html>

BIN
public/GUI/Controls Screen Controller.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
public/GUI/Controls Screen Keyboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
public/GUI/In-Game Screen Final Stage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/GUI/In-Game Screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/GUI/Level Selection Screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
public/GUI/Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/GUI/Main Menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/GUI/Splash Screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

231
public/ShatteredSwordGameDesignDocument.html Normal file
View File

@ -0,0 +1,231 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shattered Sword Game Design</title>
<meta name="description" content="Game design document for Shattered Sword.">
<meta name="author" content="">
<meta property="og:title" content="Shattered Sword Game Design">
<meta property="og:type" content="website">
<meta property="og:url" content="https://shattered-sword.web.app/ShatteredSwordGameDesignDocument.html">
<meta property="og:description" content="Game design document for Shattered Sword.">
<meta property="og:image" content="Henry Chen, Kelly Peng, Xinyu Xu">
<!-- <link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->
</head>
<body style="padding-left: 20px; padding-right: 20px;">
<h2 align="center">
Shattered Sword<br />
Game Design Document
</h2>
<img src="GUI/Logo.png" style="display: block; margin-left: auto; margin-right: auto; width: 20%;"/>
<h4 align="center">
by Henry Chen, Kelly Peng, Xinyu Xu
</h4>
<div id="content">
<h3>INTRODUCTION</h3>
<p>
This document describes a game called “Shattered Sword, ” which is designed to be a simple, 2D platformer, roguelike game. The game will employ sprite-based animation, tiled backgrounds, collision detection, physics, AI, gravity, efficient memory management, render threading, and more basic 2D game techniques.
</p>
<br />
<h3>TECHNOLOGY</h3>
<p>
Shattered Sword will be developed for the Windows Platform using the McKilla's Gorilla <a href="https://github.com/TheMcKillaGorilla/Wolfie2D">game engine</a>, which is a bare-bones engine developed by <a href="http://www.cs.sunysb.edu/~richard">Richard McKenna</a> for rapid prototyping 2D games. DirectX will be used as the underlying rendering technology. Aseprite will be used to create sprites and tiles.
</p>
<br />
<h3>BACK STORY</h3>
<p>
Hiro (hero) is the prince of a fallen kingdom that was destroyed by an evil monster. The monster has shattered the legendary royal greatsword, the only weapon powerful enough to slay the monster. The first piece of the greatsword was given to Hiro as the weapon. Hiro must go on a journey to retrieve the five pieces of the greatsword to slay the evil monster and bring prosperity back to his kingdom.
</p>
<br />
<h3>OBJECTIVE</h3>
<p>
Hiro must travel the five regions in which the sword shards are scattered to collect the pieces to reassemble the sword. Each shard is guarded by enemies, and a boss that will seek to stop Hiro. Enemies have the chance to drop buffs or amulets that will strengthen Hiro on his journey. Once Hiro has obtained a shard, the enemies in the other regions will become stronger since they have had more time to absorb the energy of the sword shard they are guarding. Once Hiro has reassembled all six pieces of the sword, he will finally be able to face the final boss.
</p>
<br />
<h3>GAMEPLAY</h3>
<p>
The game will work like a platformer, with Hiro able to run left and right, and jump up or down onto platforms and other surfaces such that we may scroll up and down. Hiro will have to be careful with the enemies that he encountered along the way. By completing each level, Hiro gains back one pieces of the sword shard at a time. After passing the first 5 levels, Hiro will be able to defeat the final boss with the completed sword.
</p>
<p>
There are three types of enemies besides the final boss:
</p>
<ul>
<li><strong>Normal enemies</strong>: randomly generated at each levels. </li>
<li><strong>Elite enemies</strong>: they are randomly turned into from the normal enemies. Defeat them will allow Hiro to gain some buff temporarily.</li>
<li><strong>Mini boss</strong>: they are the monsters that absorded the energy from the sword shards. The player can go to the next stage without killing those enemies while Hiro won't gain any ability/buff.</li>
</ul>
<p>Possible buffs gain from defeating elite enemies:</p>
<ul>
<li>Increase attack and attack speed</li>
<li>Increased attack range</li>
<li>Add dot to each attack such as burning/bleeding/poisoning</li>
<li>Each hitting on the enemy will gain a certain amount of shield, the shield can protect the player, and one of the buff can be if the enemy hit the shield, some of the damage to the shield will be return back to the enemy</li>
<li>Increased health</li>
<li>Increased movement speed</li>
</ul>
<p style="white-space: pre-line">
Besides the temporal buffs above, the player can also gain permanant buff from killing mini bosses.
After killing each boss, the main character can gain:
</p>
<ul>
<li>An ability of recover 50% of its total HP when its HP drop lower than 20%, beside the buff, the main character can gain the ability to heal</li>
<li>Ability to dash</li>
<li>A shield that can reduce the damage from front</li>
</ul>
<br />
<h3>CONTROLS</h3>
<p>
This game will be played using either a keyboard or a xbox controller. Once started, use the following: <strong>Keybord</strong> (xbox controller) - function
</p>
<ul>
<li><strong>A</strong> (Left stick) - Move Left</li>
<li><strong>D</strong> (Left stick) - Move Right</li>
<li><strong>W</strong> (Left stick) - Look Up</li>
<li><strong>S</strong> (Left stick) - Look Down</li>
<li><strong>J/Z/Enter</strong> (A) - Confirm attack</li>
<li><strong>SPACE/X</strong> (Y) - Jump</li>
<li><strong>K/C</strong> (B) - Dash</li>
<li><strong>L/V</strong> (X) - Use skill</li>
<li><strong>I/B</strong> (Right Bumper) - Open backpack</li>
<li><strong>ESC</strong> (Menu) - This pauses the game and opens setting</li>
<li><strong>Tab</strong> (Left Bumper) - This shows the map of the current level</li>
</ul>
<br />
<h3>GRAPHICAL USER INTERFACE</h3>
<p>
<ul>
<li><strong>Splash Screen</strong> - The splash screen GUI simply presents a game logo for the user to press when they are ready to play. Upon pressing it, a brief scripted sequence is played explaining a little about Hiro and the backstory for the game. While playing the message "Press ESC to Skip'' should be displayed at the bottom right of the screen. If pressed, the user will be directed to the main menu.</li>
</ul>
<img src="GUI/Splash Screen.png" width="400" style="padding-left: 40px; padding-bottom: 20px;"/>
<ul>
<li><strong>Main Menu</strong> - The screen has four buttons in a stack for the user to start the game, to go to a levels selection screen, a controls screen, and a help screen.</li>
</ul>
<img src="GUI/Main Menu.png" width="400" style="padding-left: 40px; padding-bottom: 20px;"/>
<ul>
<li><strong>Levels Selection Screen</strong> - The screen will display a map with totally 6 nodes. Each of them denotes a level and the right most one is the final stage. The first five levels will be generated randomly each of the time and the user can only select the completed levels or the first level by default. The unlocked nodes will be in primary colors while the locked ones will have muted color. There's return button in the top left corner.</li>
</ul>
<img src="GUI/Level Selection Screen.png" width="400" style="padding-left: 40px; padding-bottom: 20px;"/>
<ul>
<li><strong>Controls Screen</strong> - The screen has two tabs: the default one has a list of keyboard controls and the other tab has controls for Xbox controller. The screen also has a button to return to the menu page in the top left corner.</li>
</ul>
<img src="GUI/Controls Screen Keyboard.png" width="400" style="padding-left: 40px; padding-bottom: 20px; "/>
<img src="GUI/Controls Screen Controller.png" width="400" style="padding-left: 40px; padding-bottom: 20px;"/>
<!-- <ul>
<li><strong>Help Screen</strong> - </li>
</ul> -->
<!-- <img src="GUI/Controls Screen Keyboard.png" width="400" style="padding-left: 40px;"/> -->
<ul>
<li><strong>In-Game Screen</strong> - In the first five levels, the in-game screen will always display the remaining HP and shield on the top-left corner, the map for the current level on the top-right corner, and time used in between them. While in the final stage, the top right corner will display the remaining HP and shield for the boss.</li>
</ul>
<img src="GUI/In-Game Screen.png" width="400" style="padding-left: 40px; padding-bottom: 20px;"/>
<img src="GUI/In-Game Screen Final Stage.png" width="400" style="padding-left: 40px; padding-bottom: 20px;"/>
<ul>
<li><strong>In-Game Menu</strong> - directed to here when the player pauses the game. The screen displays the buttons: </li>
<ul>
<!-- <li>About</li> -->
<li><strong>Exit</strong>: If pressed, the game will exit to the start screen.</li>
<li><strong>Restart</strong>: If pressed, a confirmation message will pop up. If confirmed, the game will restart.</li>
<li><strong>Controls</strong>: If pressed, the game will display an info screen that includes a description of all game controls.</li>
</ul>
</ul>
</p>
<br />
<h3>ARTWORK</h3>
<p>All artwork in the game will be original. The following needs to be created:</p>
<ul>
<li><strong>Hiro</strong> - Requires six different versions to show the currently collected sword pieces with default of single piece. Each require animations for:
<ul>
<li>Idle</li>
<li>Walking Right</li>
<li>Walking Left</li>
<li>Jumping Right</li>
<li>Jumping Left</li>
<li>Jumping Up</li>
<li>Dashing</li>
<li>Attacking</li>
<li>Defending</li>
<li>Colliding With Obstacles</li>
<li>Taking Damage</li>
<li>Dying</li>
<li>Dead</li>
</ul>
</li>
<br />
<li><strong>Enemy</strong> - 4 different enemies from Chinese mythical creatures with 2 versions (normal and elite) for each. Each require animations for:
<ul>
<li>Idle</li>
<li>Moving Right</li>
<li>Moving Left</li>
<li>Attacking</li>
<li>Taking Damage</li>
<li>Dying</li>
<li>Dead</li>
</ul>
</li>
<br />
<li><strong>Mini Boss</strong> - 4 different bosses from Chinese mythical creatures. Each require animations for:
<ul>
<li>Idle</li>
<li>Moving Right</li>
<li>Moving Left</li>
<li>Attacking</li>
<li>Taking Damage</li>
<li>Dying</li>
<li>Dead</li>
</ul>
</li>
<br />
<li><strong>Final Boss</strong> - requires animations for:
<ul>
<li>Idle</li>
<li>Moving Right</li>
<li>Moving Left</li>
<li>Attacking</li>
<li>Taking Damage</li>
<li>Dying</li>
<li>Dead</li>
</ul>
</li>
<br />
<li><strong>Ceiling, Floor, Walls, &amp; Bricks Tiles</strong> - In all levels, there'll be multiple floors and platforms to jump onto and off of. We'll use tiles with different textures to denote them.</li>
<br />
<li><strong>Background Tiles</strong> - Will have 6 different designs. One of them will be indoor for the final stage and 5 other designs for the 5 levels.</li>
<br />
</ul>
<h3>SOUND EFFECTS</h3>
<p>All sound effects will be original. Sounds must be made to coincide with each of the following events:</p>
<ul>
<li><strong>Hiro Walking</strong></li>
<li><strong>Hiro Dying</strong></li>
<li><strong>Level Completed</strong></li>
<li><strong>Final Stage Completed</strong></li>
<li><strong>Enemy killed</strong></li>
</ul>
<br />
<h3>MUSIC</h3>
<p>
Game Music will be added when time permits.
</p>
</div>
</body>
</html>

89
public/index.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/9.6.9/firebase-app-compat.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/9.6.9/firebase-auth-compat.js"></script>
<script defer src="/__/firebase/9.6.9/firebase-database-compat.js"></script>
<script defer src="/__/firebase/9.6.9/firebase-firestore-compat.js"></script>
<script defer src="/__/firebase/9.6.9/firebase-functions-compat.js"></script>
<script defer src="/__/firebase/9.6.9/firebase-messaging-compat.js"></script>
<script defer src="/__/firebase/9.6.9/firebase-storage-compat.js"></script>
<script defer src="/__/firebase/9.6.9/firebase-analytics-compat.js"></script>
<script defer src="/__/firebase/9.6.9/firebase-remote-config-compat.js"></script>
<script defer src="/__/firebase/9.6.9/firebase-performance-compat.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
</div>
<p id="load">Firebase SDK Loading&hellip;</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
const loadEl = document.querySelector('#load');
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.firestore().doc('/foo/bar').get().then(() => { });
// firebase.functions().httpsCallable('yourFunction')().then(() => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
// firebase.analytics(); // call to activate
// firebase.analytics().logEvent('tutorial_completed');
// firebase.performance(); // call to activate
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
try {
let app = firebase.app();
let features = [
'auth',
'database',
'firestore',
'functions',
'messaging',
'storage',
'analytics',
'remoteConfig',
'performance',
].filter(feature => typeof app[feature] === 'function');
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
}
});
</script>
</body>
</html>

17
src/main.ts
View File

@ -11,6 +11,19 @@ import MainMenu from "./shattered_sword/Scenes/MainMenu";
let options = {
canvasSize: {x: 1200, y: 800}, // The size of the game
clearColor: {r: 0, g: 0, b: 0}, // The color the game clears to
inputs: [
{name: "left", keys: ["a"]}, //TODO - add arrow keys
{name: "right", keys: ["d"]},
{name: "up", keys: ["w"]},
{name: "down", keys: ["s"]},
{name: "jump", keys: ["x","space"]},
{name: "attack", keys: ["j","z","enter"]},
{name: "dash", keys: ["k","z"]},
{name: "skill", keys: ["l","v"]},
{name: "inventory", keys: ["i","b"]},
{name: "pause", keys: ["escape"]},
{name: "tab", keys: ["tab"]}
],
useWebGL: false, // Tell the game we want to use webgl
showDebug: true // Whether to show debug messages. You can change this to true if you want
}
@ -19,7 +32,9 @@ import MainMenu from "./shattered_sword/Scenes/MainMenu";
const game = new Game(options);
// Start our game
game.start(MainMenu, {});
game.start(MainMenu, {});
//TODO - change to splash screen once available
//game.start(SplashScreen,{});
})();
function runTests(){};

2
src/shattered_sword/Scenes/MainMenu.ts
View File

@ -76,7 +76,7 @@ export default class MainMenu extends Scene {
const aboutHeader = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y - 250), text: "About"});
aboutHeader.textColor = Color.WHITE;
// HOMEWORK 4 - TODO: Give yourself credit and add your name to the about page!
const text1 = "This game was created by Henry Chen, Kelly Peng, and Xinyu Xu";
const text2 = "using the Wolfie2D game engine, a TypeScript game engine created by";
const text3 = "Joe Weaver and Richard McKenna.";

83
src/shattered_sword/Scenes/SplashScreen.ts Normal file
View File

@ -0,0 +1,83 @@
import Scene from "../../Wolfie2D/Scene/Scene";
import ConfigManager from "../Tools/ConfigManager";
import SaveManager from "../Tools/SaveManager";
import Vec2 from "../../Wolfie2D/DataTypes/Vec2";
import { GameEventType } from "../../Wolfie2D/Events/GameEventType";
import AnimatedSprite from "../../Wolfie2D/Nodes/Sprites/AnimatedSprite";
import Button from "../../Wolfie2D/Nodes/UIElements/Button";
import { UIElementType } from "../../Wolfie2D/Nodes/UIElements/UIElementTypes";
import Color from "../../Wolfie2D/Utils/Color";
import Layer from "../../Wolfie2D/Scene/Layer";
import Label from "../../Wolfie2D/Nodes/UIElements/Label";
import Levels from "./Levels";
import Input from "../../Wolfie2D/Input/Input";
export default class MainMenu extends Scene {
protected config: ConfigManager;
protected save: SaveManager;
animatedSprite: AnimatedSprite;
clickLabel: Label;
loadScene(): void {
//load images
//this.load.image("logo", "shattered_sword_assets/images/Shattered_Sword_Logo.png");
//this.load.image("backgroundImage", "shattered_sword_assets/images/Background.png");
// Load the menu song
//this.load.audio("menu", "assets/music/menu.mp3");
}
//TODO
startScene(): void{
this.config = new ConfigManager();
this.save = new SaveManager();
// Scene has started, so start playing music
//this.emitter.fireEvent(GameEventType.PLAY_SOUND, {key: "menu", loop: true, holdReference: true});
const center = this.viewport.getCenter();
let size = this.viewport.getHalfSize();
this.viewport.setFocus(size);
this.viewport.setZoomLevel(1);
let backgroundLayer = this.addUILayer("background");
backgroundLayer.setDepth(0);
let frontLayer = this.addUILayer("frontground");
frontLayer.setDepth(1);
this.clickLabel = <Label>this.add.uiElement(UIElementType.LABEL, "frontground", {position: new Vec2(size.x, size.y + 300), text: "\"Click anywhere to start\""});
this.clickLabel.textColor = new Color(0, 0, 0, 1);
this.clickLabel.font = "Arial";
this.clickLabel.fontSize = 70;
let background = this.add.sprite("backgroundImage", "background");
background.position.set(size.x, size.y);
let logo = this.add.sprite("logo", "frontground");
logo.position.set(size.x, size.y + 20);
logo.scale.set(4, 4);
}
unloadScene(): void {
// The scene is being destroyed, so we can stop playing the song
//this.emitter.fireEvent(GameEventType.STOP_SOUND, {key: "menu"});
}
updateScene(){
while(this.receiver.hasNextEvent()){
let event = this.receiver.getNextEvent();
console.log(event);
if (Input.isMouseJustPressed(0)) { //if left click
this.sceneManager.changeToScene(MainMenu, {}, {});
}
}
}
}