• Kasia Szczęsna

Digital Portfolio - MUD game project #4 - visuals

Aktualizacja: sty 10

The last thing that had to be done was adding some simple graphics and coding the final storyline. Because text game at first were are not visually engaging, I wanted to change it a little bit by adding some GIFs I created using ASCII art in Adobe Photoshop and Adobe After Effects.

I actually stuck with the first game name I had in mind: Design your career. I like how direct it is and can intrigue people. I used a simple 'text to Ascii Art text' generator and came up with the logo on the right. ->

This one is only available right in the first screen, where people need to create their own game character. Later, I made it smaller and placed it in one line in the top left of the game interface.

I don't have a lot of experience with creating an advanced animations but luckily because of the main theme of the game, I could make a stop motion animations with no more than 40-50 frames. For these, I used ready ASCII art available online or created some of them myself.

Players are only to see them when they are at the specific point in game (animations are associated with specific commends in code using JavaScript).

This is how the final interface presents itself. I am very happy and super proud of myself that I managed to code everything (almost but not really) by myself. In the section 'recent news' I added some news from real world but adjusted it a bit to fit better with the game storyline. The progress bar works too, but I didn't manage to achieve a fluent animation, it just changes its position from the bottom every time a player answers a question correctly. During one of the crit session, I actually got a feedback that it is not visible enough so before a submission, I might change its colour or try to make it bigger.

The game is available here. The only thing which I can't fix is the skill screen at the beginning of the game. Using my local file, it looks perfectly fine but after uploading it on Netlify, the text (created via p5) moves to the left margin. :( In January, I will go back to Creative Lab and hopefully they will help me to fix this problem.