Devlog - Zero to First Trailer
Tags: gamedev, javascript, typescript, phaser
Published: 2022-02-03 18:29:29


![Current Logo for Epoch Rift, animated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0985ypj8rtp26g7e2pz6.gif)
   A few months ago, I wrote [a post](https://dsmorais.hashnode.dev/building-a-roguelike-game-with-typescript) sharing the project I have been working on and the tools I am using while making [Epoch Rift](www.epochrift.com) come to life.
On that same post I have written something resembling a roadmap that I was guiding myself through. Today I want to share the progress I've made since aswel as share some of the diagrams that I've made back in May when I was thinking about starting to develop a game.

## Game Design Document
#### Core Mechanics
So back in May, when I decided to embark on this journey, one of the most difficult tasks I had was to create something resembling a [Game Design Document](https://en.wikipedia.org/wiki/Game_design_document). Unline some of my [previous projects](https://mdyna.netlify.com), I wanted to have clear goals of I wanted to accomplish and limit my scope to what I had to do to make a basic game.

I started by deciding the core mechaniccs. I have always loved platformers, in fact, one of the first games I have played was Prince of Persia for MS-DOS. Platformers can also be considered 'easy' to develop from a technical point of view, so I decided that my game would be a platformer ✅ What else ? 

Well, the last few years we've seen a re-surgence in 2D platformers, but with roguelike features, and I have been spent way too much time playing them. This left me with a whole lot of ideas for new mechanics and new ways to randomize the experience. I wanted that ✅.

So we have a 2D platformer that would provide an unique player experience it would be played, by randomizing some elements in between runs.
At this point, I honestly felt this was too 'vain' and needed to add something to keep the players playing and making them want to return to the game. I have always hated grinds, but easily fall prey to the feeling of reward of leveling up your character and gaining that +1 HP. I needed to have some sort of progression ✅.

This is when I decided to find a good and **free** diagraming and whiteboard application. Let's have the decency to reach the common understanding that having limits on how many boards/documents can be created is not **free**. Flustered by my attempt, I picked ~~better Photoshop~~ Affinity Photo and started to paste screenshots of some of the games I remembered that, one way or the other, checked the marks for what I wanted to accomplish. One of the games that featured alot was [Hocus Pocus](https://store.steampowered.com/app/358290/Hocus_Pocus/), released in 1994, and one of the games I played during my childhood with my father. The mechanics were pretty rudimentar. You had the `Arrow Keys` for movement and looking up. `Alt` for shooting little thunderbolts and `Ctrl` to jump. That was it. This is where I took most inspiration from (look at the screenshots if it's pretty obvious). 

[Epoch Rift](https://epochrift.com) is a 2D Platformer with roguelike features with a very simple mechanic. You can only play as spellcasters. No meleee attacks or abilities. You can play as multiple characters and learn a plethora of spells depending on the level you are on. You can play as multiple characters by first unlocking them, then buying them with some kind of in-game currency. To beat a level you need to find all the spheres in that level.
Based on that, I drew up a diagram of some mechanics that I could implement, some randomizers I could introduce between levels or runs. This was my initial 'wishlist' 👇 

![Initial game core mechanics diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/384hywm4emzfzjf1ejge.png)
 
In the meantime I have dropped some mechanics, as I've quickly realized I'm working with Javascript on an engine with technical limitations and not that much documentation out there.
Also featured on this document is this Game Flow I had in mind and unlike the previous, this diagram is still valid for the most part.

![Game flow diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ri9gts20jvcrnckndxj.png)

I have decied to merge the `Character Selection Screen` and the `Portal Room` into a single `Player Hub` in which you can upgrade your character, select your character for the run and select the Epoch you want to play.
For future reference, an Epoch is a set of 3 levels + 1 Playable Boss, which becomes unlockable after you defeat it.
This model also has the advantage of being scaleable. I can release content in sets of 3 levels + 1 boss or extra playable characters.

#### Branding & Name
I feel like I have been neglecting this part of the process for quite a while. Let's start with the name:
This project's name has been evolving until I actually started creating social media accounts and registering the domain.
This projected started as **Project Brass-Lizard**, then for a brief period of time, I thought about calling it Magus Rift.
It was a game of wizards jumping through portals in time, so it sounded pretty intuitive. However, during the time I tried to go with this name, it always felt something was off. 
I landed in Epoch Rift, as the wizards are jumping through rifts in time, with the different ages of humanity being used as level settings. 

So this was the first branding itteration I had with Epoch Rift. It was the first 'official' logo with the lettering. 

![Initial Branding for Epoch Rift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ur5nz70nmtdogrr1fin.png)

Maybe I have a dirty mind, but that portal always looked *wrong*, so for the time being, I've settled with this as the logo, which is the same sprite of the portal animation, upscaled. 

![Current Logo for Epoch Rift, static](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbbqqu0dkgy7i63fwcbv.png)

I do admit I should consult with a graphic designer as this is something that can and should really be improved. Any suggestions or feedback are welcome.



## Process
Since my last post I did not make much progress in terms of actual game content. I switched jobs in December and am still adjusting. It's a new codebase, new colleagues, new technologies and new routines. Add that to having to do house chores every day, and I admit that somedays I just do nothing.
Since September, I added a new playable character, Morgana, with two new spells and the first status effect to the game, after you hit a monster with a Fireball, the monster will be burned.
I have added the first map for the hub area where the player will respawn after a run.

I also discovered the amazing [BoscaCeoil](https://boscaceoil.net/) software and produced a few songs I think are good enough to be in the game.
This all culminated in the trailer which was released and is feauturing in the landing page.

### You can check out the trailer [here](https://github.com/Dark-Magic-Studios/epoch-rift-branding/raw/main/videos/trailer.mp4)

There was also some progress on the marketing side. I designed and released the [landing page](https://www.epochrift.com) with a mailing list (which has just recently changed their pricing plans and I have to make the change).
I have also created a branding repository centralize and keep track of graphical assets. So if I need something I can just do a `git pull` and have the latest assets.

The biggest addition to the game was the portal system. In the trailer you still see the **free** level.
Above, I wrote that I wanted to randomize certain elements every run. A procedurally generated level, ideally, however let us be realistic, a pathfinding algorithm compatible with the toolset I'm using is not something I can do at my current skill, at least in the time I want to spend doing this. So here's how I'm making each run unique:
- The levels now have rooms with walls blocking the way forward.
- Every rooms has two portals, one to go back and one to go to the next room.
- The portals are connected randomly each run and can lead you to a room with one or two spheres, monsters or rewareds.

The first level was not designed with the portal system in mind, so it only has 10 rooms, but the next level, which is already being developed should have many more rooms to provide a different experience every run.

To sum up, here's what we currently have:
- 2 playable characters
- 2 maps (1st level & player hub)
- 5 spells
- 2 monsters
- Portals System
- Landing Page
- Trailer

I have already finishing designing the tileset for the next level and am at the level design stage and since I have created sort of 'templates' for new scenes, I expect the next level to be revealed within the next couple of weeks.


## Next Steps
The demo release on [itch.io](https://davidsmorais.itch.io/epoch-rift) is overdue, mostly because I did not account for the time it would take to work on the trailer and the landing page. So in the next few months I will be working on the following:
- 2nd & 3rd level
	- Visceral Hills & Great Pyramid of Nektanebo are the next two levels of the first Epoch.
	- Visceral Hills on the insides of an ancient being. Meat and flehs are your surroundings.
	- Great Pyramid of Nektanebo takes place inside a pyramid with an egyptian theme.
- 1 boss encounter
	- To finish the first Epoch you must defeat the boss.
	- After defeating the boss, it becomes an unlockable playable character.
- React UI
	- My current UI is messy and ugly. And due to its `<canvas>` based nature, Phaser is also not the best option to create UI. 
	- I intend to create some sort of bridge between the Phaser game and a React *overlay* application which will be responsible for rendering the UI parts.
		- This includes dialogue, character upgrades, Game Over & Title Screens.
- Steam Page Launch
	- For marketing purposes, before releasing the demo on itch, I really want to start gathering wishlist requests.
- Wiki Launch
	- I'm currently using Obsidian to keep track of spells, characters & enemy documentation. I intend to create an engine to render my Obsidian vault as a Wiki website.
- Release on itch.io
	- When all of the above is done, I need to create all the design assets inherent and copy content for an itch.io release.
## Future Projects
In the near future, I wish to create some open-source projects and distribute them to other indie game developers. This is also great to gain some visibility among the indie game developer scene.
- React UI Bridge
	- I still have not decided how I should call this, but this is basically a way to allow developers to use JSX to develop the UI of their phaser games.
- Dialogue Manager
	- I want to have dialogue based a player's progress with a character. So if a player speaks twice to the same NPC, he will get diffent dialogues and advance in the game story.
	- To simplify this, process I want to create a graphical interface to generate a `json` that will be consumed by the React UI Bridge
- Obsidian to Wiki
	- As said above, I intend to create a static website based on my markdown notes in my Obsidian vault. I have thought about using a CMS for this or even a [Notion](https://notion.so) page. But there's nothing like this in the open source scene, so it should be an interesting project to gain some visibility in an area more outside of the indie game dev circle.

## Tools
I have pretty much detailed the tools I'm using for this solo-development project in my [previous post](https://dsmorais.hashnode.dev/building-a-roguelike-game-with-typescript), still before we start I'm gonna share the updated list of my current stack.
- Graphics
	- Pixel Art
		- [Tiled](https://www.mapeditor.org/)
		- [Aseprite](https://www.aseprite.org/)
	- Other
		- [Affinity Photo](https://affinity.serif.com/en-gb/photo/)
		- [Figma](https://figma.com)
- Code
	- VsCode
		- [Phaser](https://phaser.io/)
		- [Typescript](https://www.typescriptlang.org/)
	- Hosting & Source Control
		- [Netlify](https://netlify.com/)
		- [Gitkraken](https://gitkraken.com/)
		- [Github](https://github.com/)
- Music Production
	- [Bosca Ceoil](https://boscaceoil.net/)
- Project Management & Documentation
	- [Excalidraw](https://excalidraw.com/)
	- [Obsidian](https://obsidian.md)
	- [Ora](https://ora.pm)


## Conclusion
I know I still need to invest in my branding efforts and improve on that front, but for now I really feel like I have spent enough time on this. 
I expect the next few months to be more smooth and provide much more in-game content, and hopefully, the next devlog will be to tell you about our demo release 🚀
Hope you liked to learn more about my project, [Epoch Rift](https://epochrift.com). Do you have any questions or suggestions ? Feel free to drop a coment or contact me via [my website](https://dsmorais.com).


[Follow Epoch Rift](https://twitter.com/epoch_rift)
[Follow David Morais](https://twitter.com/davidsmorais)