working towards new design with bottom nav bar; not quite there
chimchooree
2 years ago
parent
4832391111
commit
36ac84cc5a
@ -0,0 +1,64 @@
|
|||||||
|
.nav-diary {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-play {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-about {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-dev {
|
||||||
|
grid-area: 1 / 4 / 2 / 5;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.navlink {
|
||||||
|
font-size: 110%;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #E6E8EF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.navlink a:link {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:visited {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:hover {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
.navlink a:active {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
.nav-grid img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
background-color: black;
|
||||||
|
width: 100vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,76 @@
|
|||||||
|
% rebase('frame.tpl')
|
||||||
|
<div class="jump"><img src="/static/img/prom/BlessFREY_logo.png" alt="(link: BLESSFREY" class="logo">
|
||||||
|
<a href="#demo">play</a> • <a href="#system">system</a> • <a href="#story">story</a> • <a href="#characters">characters</a> • <a href="#info">info</a><br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="long">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="system" id="system">
|
||||||
|
<div class="center"><h2>system</h2>
|
||||||
|
<p>Blessfrey is a 2D action rpg with a dual-job system which will determine the skill pool from which you will build your skillbar. Your AI companions will have skillbars of their own to edit, so think in terms of teams in order to defeat bosses and solve puzzles. Barely any class progression decisions are permanent, so you can experiment and express your playstyle. <br></p>
|
||||||
|
<br>
|
||||||
|
<h3>jobs </h2>
|
||||||
|
<p>Blessfrey jobs are equivalent to RPG classes. Your first job is a permanent decision which you will make early in gameplay. You will be able to unlock the rest and more during gameplay as side gigs. You can only have one side gig at a time, but you can always swap it outside of combat areas. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>Each job has its own skill pool. Each skill is assigned to a job trait (similar to an RPG attribute). Each character has a set number of trait points they can use to raise job traits and the effectiveness of their associated skills. You gain more trait points through leveling up, but traits can be raised or lowered at will. Experiment to find your specialization! <br></p>
|
||||||
|
<br>
|
||||||
|
<p>Your first job offers an exclusive trait called a job perk. It is not only tied to the effectiveness of related skills but also provides a constant buff. You can use the skills of your side gig's perk-related skills, but you cannot raise their effectiveness nor gain the buff. Perks are what distinguish characters from each other. <br></p>
|
||||||
|
<br>
|
||||||
|
<h3>skills</h2>
|
||||||
|
<p>Skills are individual powers that modify entities in the world of Blessfrey. They can launch fireballs, protect against incoming damage, spawn items or minions, teleport characters, reveal more UI details, and more. Your skillbar only has 8 skill slots and can only be edited in safe areas. The challenge comes from discovering effective strategies and synergies. Many of the same skills will be available to the player and enemy characters alike, so you must learn how to both use and counter each skill. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>Skills are inspired by Magic: The Gathering keywords. There are a limited number of keywords that are quick to learn, but I will combine them with interesting conditions to create a wide arsenal of options. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>Skills are gained during exploration. As you find new areas, encounter enemies, and interact with your surroundings, you will internalize those experiences as new skills. There are multiple paths to learning, so you are free to focus on your favorite parts of the game. <br></p>
|
||||||
|
<br>
|
||||||
|
<h3>team</h2>
|
||||||
|
<p>You will meet new friends and allies in the world, and they will join your team as customizable AI companions. Edit their skillbars to complement yours and keep their gear up-to-date. They will remember your responses and actions, so stay attentive to the flow of your relationship. There may be consequences - sweet or treacherous. <br></p></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="story" id="story">
|
||||||
|
<div class="center"><h2>story</h2>
|
||||||
|
<p>You play as Helia, a foreign transfer student living with her estranged uncle in a rural southern American town. You'll find an inexplicable amount of amenities, but none of them hold a candle to the haunted dungeon beneath the city. It's off-limits, but a dare's a dare. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>There's a whole other world down there with multiple fantastical races. Once you've been down there once, it's hard to avoid getting tangled in its mysteries. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>The town is strange in its own right. Lucrest flourished under it's remarkably young mayor and became an economic oasis in an expanse of farmlands and mining communities, drawing people from out-of-state to enjoy its attractions. Mayor Dia claims to have a magic wand that controls economy, and people aren't inclined to disagree. <br></p></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="characters" id="characters">
|
||||||
|
<div class="center"><h2>characters</h2>
|
||||||
|
<p><b><a href="/char/Helia">Helia</a></b> (?/?) - The player character! Almost every job is available to her. Where she comes from, combat training is unheard of, so she's a blank slate. Her reasons for suddenly moving countries by herself at the end of a schoolyear are filled with holes, so rumors spread ahead of her arrival. Barely anyone moves to Lucrest, though, so most people are excited to meet the new girl. <br></p>
|
||||||
|
<br>
|
||||||
|
<p><b><a href="/char/Angel">Angel</a></b> (Weaponmaster/Hacker) - Her real name's Miriam, but it sounds too frumpy, so please call her Angel. She is a naturally gifted with heavy blades and participates in a competitive swordsman league, but she usually comes across as friendly if not a little absent-minded. Computers interest her deeply, so she always has tinkering away with some new gadget or software. <br></p>
|
||||||
|
<br>
|
||||||
|
<p><b><a href="/char/Tessa">Tessa</a></b> (Tamer/Streetfighter) - She actually has a foreign background, too. Her mom and late father moved with her from France when she was really little. She loves the outdoors, animals, and fashion and is always sticking her nose in everyone's business. She's all fun all the time, so she doesn't always know where the boundary is between playful teasing and outright bullying. <br></p>
|
||||||
|
<br>
|
||||||
|
<p><b><a href="/char/Chloe">Chloe</a></b> (Disciple/Weaponmaster) - She's an orphan girl who was taken in by the church, and she spends a lot of her time serving there. She's reticent and deeply introverted but very sweet to those who get to know her. <br></p>
|
||||||
|
<br>
|
||||||
|
<p><b><a href="/char/Aries">Aries</a></b> (Weaponsmaster/Tamer) - Angel's twin brother, though he's her opposite in many ways. He's more attentive, but his frankness and disregard for etiquette makes him seem boorish. He also takes things with more gravity, fully committing himself to his studies and training. He prefers light weapons, light armor, and practical survival skills. <br></p>
|
||||||
|
<br>
|
||||||
|
<p><b><a href="/char/Night">Night</a></b> (Chemist/Weaponsmaster) - Despite not being much older than the other teens, he's completed a few years of apprenticeships at the leading research hospitals in the capital. The deterioration and death of his grandparents forced his return to close the final paperwork and figure out how to support his baby brother in the meantime. He runs a local pharmacy for now. <br></p>
|
||||||
|
<br>
|
||||||
|
<p><b><a href="/char/Rune">Rune</a></b> (?/?) - A startlingly tall and listless horned boy discovered in the local dungeon, surrounded by dinosaurs and other abyssal beasts. He doesn't trust people from the surface at first. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>More characters are over on the <a href="/characters">characters page</a>. <br></p></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info" id="info">
|
||||||
|
<div class="center"><h2>info</h2>
|
||||||
|
<p>Blessfrey is a singleplayer action RPG game that will be playable in at least Windows, Linux, and HTML5. I'm going to sell it on Steam and wherever else lets me list it. It's being developed by me (chimchooree) in Godot Engine with original writing and art, though I'll need help with music and SFX eventually. My husband also helps sometimes, especially with writing plug-ins for the engine.♡ The full credits are available on the <a href="/credits">credits page</a>.<br></p>
|
||||||
|
<br>
|
||||||
|
<h2>timeline</h2>
|
||||||
|
<p>Legless the Cat is the first demo. It has nothing to do with the game, but it's an important exercise for exporting and embedding an HTML5 game. I'd hate to make a sophisticated game over multiple years and be too inexperienced to actually share it with anyone. It also lets my kitty be in his own videogame! So cute. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>As for the first real demo, I am currently creating a vertical slice of the game, focusing on a robust presentation of the skill system. This demo will be more of a tech demo than a game. It will feature 3 demo areas, and you will receive a bingo card directing you to try a smattering of what the full game will have to offer. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>The next demo will demonstrate the game's faction system and AI, presenting more as a cutscene with unpredictable outcomes. A couple of different AI groups will wander around a map, intersect, then attack or aid according to affiliation. The faction system is rather complex, so I need to isolate it for testing purposes. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>I think at this point, I will be able to put out a real demo. Demo #3 is going to be a level from the full game, introducing Rune and his multiphase boss fight. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>If I can do that, I'll definitely be ready to make chunks of the game until the entire thing is complete. <br></p>
|
||||||
|
<br>
|
||||||
|
<p>No hard timeline on this, though! I've been working for years and finally am about ready to have something to show for it. Gamedev has been a deep learning experience, and I'm looking forward to sharing my results with you. <br></p></div>
|
||||||
|
</div>
|
||||||
@ -1,5 +1,35 @@
|
|||||||
% import random
|
% import random
|
||||||
<!--Footer-->
|
<footer><div class="footer-grid">
|
||||||
<footer>
|
<div class="nav"><div class="nav-grid">
|
||||||
|
<div class="nav-diary">
|
||||||
|
<a href="/diary">
|
||||||
|
<div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div>
|
||||||
|
<div class="navlink">diary</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-play">
|
||||||
|
<a href="/demo">
|
||||||
|
<div class="navbutton"><img src="/static/img/nav/play.png" alt="(link: play)"></div>
|
||||||
|
<div class="navlink">play</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-about">
|
||||||
|
<a href="/about">
|
||||||
|
<div class="navbutton"><img src="/static/img/nav/about.png" alt="(link: about)"></div>
|
||||||
|
<div class="navlink">about</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-dev">
|
||||||
|
<a href="/dev">
|
||||||
|
<div class="navbutton"><img src="/static/img/nav/dev.png" alt="(link: dev)"></div>
|
||||||
|
<div class="navlink">dev</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="links">
|
||||||
<a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} © chimchooree 2020-{{year}}<br>
|
<a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} © chimchooree 2020-{{year}}<br>
|
||||||
</footer>
|
</div></div>
|
||||||
|
</div></footer>
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<title>{{title or 'blessfrey.me'}}</title>
|
<title>{{title or 'blessfrey.me'}}</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" type="text/css" href="/static/css/all.css"/>
|
<link rel="stylesheet" type="text/css" href="/static/css/all.css">
|
||||||
<link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css"/>
|
<link rel="stylesheet" type="text/css" href="/static/css/nav.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css">
|
||||||
|
|||||||
@ -1,47 +0,0 @@
|
|||||||
<!--Navigation Bar-->
|
|
||||||
<div class="nav-row"></div>
|
|
||||||
<div class="nav-grid">
|
|
||||||
<div class="nav-left"></div>
|
|
||||||
<div class="nav-home">
|
|
||||||
<a href="/">
|
|
||||||
<div class="navbutton"><img src="/static/img/nav/home.png" alt="(link: home)"></div>
|
|
||||||
<div class="navlink">home</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-blessfrey">
|
|
||||||
<a href="/demo">
|
|
||||||
<div class="navbutton"><img src="/static/img/nav/blessfrey.png" alt="(link: blessfrey demo)"></div>
|
|
||||||
<div class="navlink">game</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-fashion">
|
|
||||||
<a href="/fashion">
|
|
||||||
<div class="navbutton"><img src="/static/img/nav/fashion.png" alt="(link: fashion blog)"></div>
|
|
||||||
<div class="navlink">fashion</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--<div class="nav-art">
|
|
||||||
<a href="/art">
|
|
||||||
<div class="navbutton"><img src="/static/img/nav/art.png" alt="(link: art gallery)"></div>
|
|
||||||
<div class="navlink">art</div>
|
|
||||||
</a>
|
|
||||||
</div>-->
|
|
||||||
|
|
||||||
<div class="nav-diary">
|
|
||||||
<a href="/diary">
|
|
||||||
<div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div>
|
|
||||||
<div class="navlink">diary</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-about">
|
|
||||||
<a href="/me">
|
|
||||||
<div class="navbutton"><img src="/static/img/nav/about.png" alt="(link: about me)"></div>
|
|
||||||
<div class="navlink">about</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="nav-right"></div>
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in New Issue