Log 2 – 8.12.25-14.12.25

STAGE: Pre-production – Game Design and Promotion

KEEP DRAWING AND BONING UP ON JS…

Mon 8 Dec – Sun 14th Dec

Focus of the week: game as user interface – how screen design conveys game information – visual cues to guide player… – from the reading, playing and planning…

Mon

• Reading and analysis
• Llanos, S. C., & Jørgensen, K. (2011, January 1). Do Players Prefer Integrated User Interfaces? A Qualitative Study of Game UI Design Issues. Proceedings of DiGRA 2011 Conference: Think Design Play. https://doi.org/10.26503/dl.v2011i1.514
• Fagerholt, E., Lorentzon, M., & Björk, S. (2009). Beyond the HUD – User Interfaces for Increased Player Immersion in FPS Games.
• user interface design principles – as applied to video game design
  • https://www.justinmind.com/ui-design/game
  • https://dev.to/uicraft_by_pratik/mastering-uiux-game-design-a-comprehensive-guide-be8
  • https://docs.monogame.net/articles/tutorials/building_2d_games/19_user_interface_fundamentals/
  • https://punchev.com/blog/10-essential-ui-design-principles-every-designer-should-know
• ok, i am NOT talking about User Interface – I am talking about how game world is designed to convey narrative information etc. from a sprite perspective…
• use of size/detail/placement/texture/tone/colour etc.

Examples

• for player stats – change sounds of sprites to convey status – an example is in Links Awakening – power-ups that have limited expiry time use a special music piece whist active, then it finishes when the power-up runs out. It’s an effective way to indicate the time limit – and the music is quite hyped, adding to the sense of urgent clock tickery.
• Links awakening – once you leave the first house, in search of the beach to the south, the level design supports the path you need to take – the path stands out and is made VERY obvious to the player
• There is a heirarchy of

• take aways
  • I am a big fan of having the game world convey as much of he information as possible
  • The heirarchy of importance in a game screen – how these things read etc… this can also be contextual, so needs to be carefully balanced…

Tues

• Project work 1
• At least enough to
• developing a visual style
  • what are the immovable constraints
  • what do we need to draw from
  • i like the way in b and w graphics they slowly meld from the black describing the texture to white describing it
  • purposes – in game – cutscenes
  • https://twinwingames.com/guide-to-2d-game-art/
  • look at analysis of things i like as well as devligs by those that inspire – pedro medeiros
  • how do they handle detail and readability in backgrounds, scenes, etc. characters, props – size, detail, animation, scenes etc. textures, tone etc. scale
  • https://www.patreon.com/posts/gamedev-city-97987324
  • patreon
  • I ike a style where everything is doing something – nothing is superfluous…
• 4 colours (255 – 100%, 170 – 67%, 85 – 33%, 0) – after looking at the graphics in
  • Creating depth in textures etc.
    • Foreground use only three colours
      • black for shadows and outline (yeah, I know, not a fan of them…)
      • dark grey for base
      • light grey for highlights
    • Midground use only three colours
      • dark grey for shadows and outline (yeah, I know, not a fan of them…)
      • light grey for base
      • white for highlights
    • Background use only light grey
    • actual background is white
  • This logic applies to

Wed

• Game play – continue with current game and notes etc.
• Play for an hour – make notes

The Legend of Zelda – Link’s Awakening – screen composition and graphics

look at context and purpose of graphics – heirarchy, use of texture and tone to convey important information – in a way, it follows user interface design principles…

Takeaways for Subliminor

Thu

• Project work 2 – Pre production –

More detailed sketches for intro cutscene

• mock up the Intro Cutscene properly – more high fidelity pen and paper…
• Focusing more on the compositions…
• break down the intro into the parts
• The approach – shape – light – detail (this bit depends on the purpose and context – e.g. if its in the background – consider limiting this, possibly to 0
• storm clouds – side on view – start with a series of circles – on mass, they have a flow because they are in a group- light from above/behind top left –
  • pedro says: Start by thinking in groups of spheres with a flat base
  • calm clouds – side on view – limit detail as it is in the background
  • rain – side on view
  • wind whisps – side on view
  • sea mist flurries – side on view
  • waves on beach – 3/4 view – these are distant, only need to be a few curved lines…
  • rock with logo – side on view
  • calm scene of the bay – headland in distance – side on view – refer to initial sketch –
  • calm scene of the bay – the main rock bits…3/4 view
  • top half of character from behind – 3/4 view
  • sparkly/glinty sand – side on view
• Aiming for the style that has as few outlines as possible – e.g. transitioning from one shade to another doesn’t have an outline (I mean, why do that???)
• Get reference…
• https://saint11.art/blog/pixel-art-tutorials/#Clouds
• Interestingly, the b.g clouds here are just the thing I think: https://saint11.art/blog/pixel-art-tutorials/#Ruins
• This is the one for the character: https://saint11.art/blog/pixel-art-tutorials/#TopDownWalkCycle and this one: https://saint11.art/blog/pixel-art-tutorials/#TopDownRun
• 2 tone
• QR code of subliminor.com

Fri

• Project work 3 – mockup website – it will be charcoal black – with a square in the middle – that is the ‘game screen’ – it will be 2x scale ()
• also add in links to discord channel and nlx dev blog
• geeze i am rusty on css and html! yikes!

Sat

• Finish off tasks or, if done – start another task…
• do the tutorial
• icon/logo – design to work at small scale…

Sun

A quick catch up session

Takeaways

Today is making the web page!!!

The doing…

• Hour 1 – document and update log of things done (this page)
• Hour 2 – add tasks to the next one… (include a link to it from here…)

HOUR 3 and 4 – Tutorial/learning thing – do that tute in the GBStudio world building book

Lesson for the week –

QUESTIONS

keep adding them, and keep rolling them over…

• develop initial style guide as a starting point – develop a starter style guide – link to pinterest
• set up pipeline – 1. work on local machine – using VScode 2. commit to gitlab – 3. posted on site
• mockup intro cutscene in aesprite
• tidy up the game design doc
• create icon for discord etc. – a shape that reads properly
• examples of multiple ways of accessing game world data – not necessarily the SAME game rendered for different devices and platforms – but ways of accessing the game world using different APPS on the SAME device/platform…
• looking at ways of interacting with the gameworld – via handheld devices – what are some solutions from different games?
• how could i incorporate paper mechanics and cutouts?
• build in 30 mins of drawing activity every day please! and then, on to watercolour etc.
• add in a place to capture questions/tasks that need to be investigated/done and can be added to the list every week…