Create first rooms

[waackph]

There are a bunch of decisions made stylewise to create the first room:

• Art Style
  • Background/Objects
  • Watercolor on paper (digital looks not as good)
  • Digital Fineliner for outlines (to make it more of a comic look) (analog looks not as consistent but we want consistency in the lines, the lines themselves look fine with scanned watercolor paintings)
  • Characters
  • Same look as objects and rooms, characters are more roughly/sketchy drawn, but also with watercolor and digital fineliner
• Mood Transition
  • For each mood we need animations and textures
  • The transition could be a morph from one style into the other, either stopping the scene or while animations are running.
  • OR: The textures are overlayed by a white noise style image (like a noise on TV) and then the style switches within the following frame
• Animation
  • To reduce the amount of drawings for the animation, the style could be more of a stop motion kind (few frames for an animation with greater time spans to run each frame
  • Furthermore we could e.g. just draw the arm in different positions to animate a grab motion, using the rest of the body as is.
• Format
  • We use a 16:9 ratio format that needs to be applied to the watercolor canvas (probably leads to cutting a bit of the canvas off.
  • This will be also applicable for 1920x1080 resolutions. With a scanner that can scan with >=600dpi also small watercolor paintings should be sufficient for a good quality texture.
• Workflow
  • Define Canvas space (16:9 ratio)
  • Layout the room with all its objects and doors
  • Draw room, leave space for the objects to interact with or foreground (simply fill with background color)
  • Draw foreground (if exists)
  • Draw objects with more details, if interactable (and with animations) in different mood states (normal, depressed)
  • Draw character and room relevant character animations in different mood states
  • Scan all drawings with appropriate DPI
  • Scale objects to room appropriate sizes
  • Scale characters to room appropriate sizes
  • Define objects and characters positions in the room (in pixel positions)
  • Sort animations
  • Create data structure (use conscious content tool)
  • Load game with data structure

See also this link for digitizing watercolor paintings: https://susanchiang.com/blog/how-to-digitize-watercolor-paintings

[waackph]

Setup Todos:

• [x] Research the correct width and height for a 16:9 canvas in the size of the watercolor canvas
• [x] Scan the watercolor with different dpi (300, 600, 1200) and scale it to the flat screen to check the quality (can we see pixelation on the screen?) -> If not, the setup, canvas, format is sufficient.
• [x] For the house and each room, depending on the houses layout, define the objects in the room and the basic arrangement (especially doors).

Creating first rooms (corridor, living room, dining room/kitchen)

• [x] Corridor #35
• [x] Living Room #36
• [x] Dining Room/Kitchen #37
• [ ] Add mood assets for Corridor #39
• [ ] Add mood assets for Living Room #40
• [ ] Add mood assets for Dining Room #38

Creating Character:

• [x] Create Animations (idle, walking, sleeping, sitting/eating) #41
• [x] Create idle/walking Animation for depressed/manic mode #42

Creating data structure:

• [x] #43
• [ ] #44

Todos for each room:

• [x] Rough sketch of rooms to arrange objects, so it makes sense (composition of drawing with correct canvas size and so on)
• [x] Think about how the room should look (concretely) depending on the story and the characters. What exactly is in a living room of an old woman that is isolated and depressed? How does the young daughter of that woman with that experience perceive that room and the objects? What are important objects the daughter remembers concretely that are more in focus of her perception? How does she perceive the room in a stable state of mind and how in a depressed state of mind? (At this point a good excercise might be to write the thought trees of the objects).
• [x] Sketch the room and all objects (and their animations) in normal mood (depending on arrangement of room)
• [x] Implement filter/shader for different moods. Sketch room and objects (and their animations) in depressed/manic mood (depending on arrangement of room) that should look or act differently. Think also of possible surreal or interessting metaphoric representations of the objects or styles for the atmosphere (this may depend on the main protagonists experiences and recollections).
• [x] Sketch Character and animations (idle, walk, ...)
• [x] Fill all sketches with watercolor
• [x] Scan watercolor paintings

[waackph]

Scan Setup:

• Use Epson Scan 2 on Linux, with color, size A5, 400 dpi, PNG Format
• Use 400 dpi (is a good compromise between image size and resolution. With 300 dpi the image looks a little blurry and with 600 dpi the image is quite big)
• Use the small canvas A5 size

[waackph]

Format:

• Screen: 16:9 = 1.78:1
• DIN A5: 210 x 148 mm = 1.414:1
• But we need to subtract 10mm because of the bond edge. Hence: 200mm width (x*1.78 = 210 => 210/1.78 = x = 118 mm)

According to: https://www.omnicalculator.com/other/aspect-ratio - having a width of 200mm, we need a height of 112.5 ~ 113mm

=> The format is: 200mm X 113mm.

[waackph]

Image Composition (roughly):

• 1920x1080 target resolution

Example Corridor:

• Corridor is 1920*2.5 in length (2.5 screen sizes)
• Floor starts at 1080*0.6=648px => floor fills 40% of image, 60% is wall (can not be entered by player)

Example Living Room:

• 1920*1 in length
• Floor starts roughly at 1080*0.6=648px

Example Dining Room/Kitchen:

• 1920*1.5 in length
• Floor starts at 1080*0.5=540px => floor fills 50% of image, because the dining table is in the middle of the room and the floor needs more space

[waackph]

Krita Workflow - Objects:

1. Scan painting
2. Trim canvas to one object
   1. Selection Tool, Select object
   2. Invert: Select > invert selection
   3. Press Del (Entf)
   4. Trim canvas: Image > Trim to current layer
3. Add image to Room (to get correct position and scale in scene)
   1. Position: Select Transform Tool and look up position in Tool Options Menu
   2. Dimensions: Right click layer > properties > second Tuple in Dimensions Row
4. Scale down canvas and name file: [name]_[width]pos[x]_[y].png
   1. Down-scale image: Image > Scale to new size > enter width x height > use Lanczos3 Filter (see also: https://www.cambridgeincolour.com/tutorials/image-resize-for-web.htm) (do not flatten outline layer into image, because it will smooth the edges (because it is one when resampling)
   2. Trim canvas: Image > Trim to current Layer
   3. Export as PNG
5. Paint Outline (do it after scaling, so the outline has always the same thickness)
   1. Add layer "outline"
   2. Select Fineliner, 3px
   3. Paint outline
6. Knock out background
   1. If necessary: duplicate outline, name it contour, remove all outlines not part of outer contour
   2. Select Contiguous Selection Tool
   3. Select Layer of outline/contour
   4. Click between contour/outline and canvas frame (ie on background)
   5. If necessary: Invert selection
   6. Select layer of background
   7. Press Del (Entf) to remove background (maybe multiple times)

[waackph]

Krita Workflow - Rooms:

1. Create Canvas with correct aspect ratio (1920*amount_sheets x 1080)
2. Import Scan as new layer
3. Scale scan to canvas (with transform tool)