Skip to content

Part 1

Jump to bottom
blikoor edited this page May 9, 2020 · 3 revisions

Home>Notes>Part-1-Setup

Part-1: Setup

Game layout

Now, almost two years after Mr. Taft started his tutorial series, it is self evident that the roadmap changed significantly along the way. I've taken the liberty to update the sketch used in the initial planning phase, to reflect development later in the series.

specification

Methodology

The default game design methodology to deal with the numerous screen sizes of different devices, is to make use of a principle called content scaling — using a logical resolution, smart asset selection, Letterbox scaling and Nine-patch scaling. The standard for mobile game development have long been to use a resolution of 480x320 (3:2) for that purpose.

However, trends show that the industry have been moving towards 16:9 since 2008. It is the most promising common aspect ratio among the latest mobile platforms and devices. Popular resolutions associated with this aspect ratio include: 1280×720, 1366×768, 1600×900, 1920×1080, 2560×1440, 3840×2160, 5120×2880, 7680×4320.

To be honest, it might be my lack of experience, but it just seems like an odd design choice to select a custom or otherwise unpopular resolution for the project. But for the sake of simplicity, we'll keep to the proposed resolution of 576x1024.

Editor settings (optional)

Select Editor > Editor Settings... from the menu to change these settings in Godot.

Tab Category
General Text Editor
  • Files / Trim Trailing Whitespace On Save — On
  • Cursor / Scroll Past End Of File — On
  • Completion / Add Type Hints — On

Project settings

Select Project > Project Settings... from the menu to change these settings in Godot.

Tab Category
General Display / Window
  • Size / Width — 576
  • Size / Height — 1024
  • Size / Test Width — 288 432
  • Size / Test Height — 512 768
  • Stretch / Mode — 2d
  • Stretch / Mode — keep_width
Tab Category
General Input Devices / Pointing
  • Emulate Touch From Mouse — On
Tab Category
General Rendering / Quality
  • 2d / Use Pixel Snap — On
Tab Category
Input Map Action
  • Add ui_touch — Device 0, Left Button

Deviations

  1. Although using a sprite sheet is overkill, the educational value can't be under estimated and the performance value undeniable. Use Krita to divide 'top UI v 2.png' into separate sprites, named 'bar.png' and 'counter.png'.

  2. The bottom UI was designed with a height of 96 instead of 92 pixels. This minor disparity is not a big deal, assuming its just a small oversight, we might as well fix it. Use Krita to edit 'bottom UI v 2.png', correct the dimensions and export as 'polygon.png'.

  1. Use TexturePacker to make a sprite sheet for the game UI, using PNG-8 texture format, reducing the sprite sheet file size by 46% (11KB to 5KB). Combine 'bar.png', 'counter.png', 'polygon.png' and publish the sprite sheet named 'game UI.png' and the data file named 'game UI.tpsheet'.

  2. Make a new folder in the FileSystem dock and name it 'Interface'. Copy 'game UI.png' and 'game UI.tpsheet' into the 'res://Interface/' folder.

  3. Make a new folder in the FileSystem dock and name it 'assets' instead of 'art'. Copy 'background 2.png' into the 'assets' folder.

game_window.tscn ➨ Game.tscn 6. Make a new node, use the base Node as the root of this scene, instead of a Node2D and simply name it 'Game'. We don't require position, rotation, scale and z-index for this node. Saved the scene as 'Game.tscn' in the project root.

  1. Make a Control node and name it 'Interface'. Modify the node's anchors to Full Rect in the layout menu. Save the node as a separate scene in the 'Interface' folder (right-click, select Save Branch as Scene).

Bars.tscn 8. Make a new scene. Add a NinePatchRect node, name it 'Bars'. Drag & drop 'bar.tres' ('res://Interface/game UI.sprites' folder) in the texture of the node. Set the Patch Margin left: 35, Top: 35, Right: 35, Bottom: 61. Set the Rect/ Min Size x: 192, y: 128. Save the scene as 'Bars.tscn' in the 'Interface/Bars' folder.

ScoreBar.tscn 9. Make a new inherited scene, select 'Bars.tscn' as the base scene. Rename the NinePatchRect node to 'ScoreBar'. There is no other immediate changes, just save the scene as 'ScoreBar.tscn'.

GoalBar.tscn 10. Make a new inherited scene, select 'Bars.tscn' as the base scene. Rename the NinePatchRect node to 'GoalBar'. There is no other immediate changes, just save the scene as 'GoalBar.tscn'.

Counter.tscn 11. Make a new scene. Add a NinePatchRect node, name it 'Counter'. Drag & drop 'counter.tres' ('res://Interface/game UI.sprites' folder) in the texture of the node. Set the Patch Margin left: 57, Top: 57, Right: 57, Bottom: 90. Set the Rect/ Min Size x: 192, y: 192. Save the scene as 'Counter.tscn' in the 'Interface/Counter' folder.

Polygon.tscn 12. Make a new scene. Add a NinePatchRect node, name it 'Polygon'. Drag & drop 'polygon.tres' ('res://Interface/game UI.sprites' folder) in the texture of the node. Set the Patch Margin left: 26, Top: 26, Right: 26, Bottom: 35. Set the Rect/ Min Size x: 576, y: 96. Save the scene as 'Polygon.tscn' in the 'Interface' folder.

Interface.tscn 13. Make an instance of the various scenes that form part of the interface, drag & drop 'ScoreBar.tscn', 'GoalBar.tscn', 'Counter.tscn', 'Polygon.tscn'' into the scene tree. Set the anchor for each node in the layout menu, 'ScoreBar': Top Left, 'Counter': Center Top, 'GoalBar': Top right, 'Polygon': Center Bottom

Summary

Node
Nodes are Godot’s building blocks. They can be assigned as the child of another node, resulting in a tree arrangement. A tree of nodes is called a scene.

Node2D
A 2D game object, with a transform (position, rotation, and scale). All 2D nodes, including physics objects and sprites, inherit from Node2D. Use Node2D as a parent node to move, scale and rotate children in a 2D project. Also gives control of the node’s render order.

TextureRect
Used to draw icons and sprites in a user interface. The texture’s placement can be controlled with the stretch_mode property. It can scale, tile, or stay centered inside its bounding rectangle.

NinePatchRect
Scalable texture-based frame that tiles the texture’s centers and sides, but keeps the corners’ original size. Perfect for panels and dialog boxes.

Terminology

  • The Screen size of a device gets measured using inches, it is the physical size of the actual screen of any particular device. Measurements are taken from one corner of the screen to the opposite diagonal corner.

  • The screen resolution is measured by the number of distinguishable pixels that can be displayed in each dimension (height and width).

  • The aspect ratio of an image or screen resolution describes the proportional relationship between its width and its height. It is the lowest common denominator that can describe that relationship.

  • The pixel density is the number of pixels that fit into the resolution, image or device and is measured in pixels per inch (PPI) or pixels per pixels per centimetre (dpi). High-density screens have more pixels per inch. As a result, UI elements of the same pixel dimensions for example, appear larger on low-density screens and smaller on high-density screens.

  • The principle called content scaling means that you design the game for the so-called logical resolution and just scale the entire game up on larger resolutions.

  • The logical resolution or safe zone is the lowest resolution that you want to support. All the important and interactive elements of the game fit in this area. Noninteractive elements like a background can be larger so that more detail is visible depending on the resolution.

  • Smart asset selection means to load a different version of an image, depending on the size needed for the current device. This avoid that images get blurry when scaling the scene up.

  • With the letterbox Scale Mode content is scaled uniformly (i.e. with the same value for x and y scale) so that the smaller side fits into the display. This setting results in remaining space on the borders, depending on the aspect ratio of the device.

  • Nine-patch scalable graphics are simply PNG graphics that have patches, or regions of the image, defined to scale and stretch in the appropriate areas instead of scaling the entire image as one unit. Generally, the centre patch is transparent or solid, with parts of the edges set to remain fixed, other edge parts set to stretch, and the corners set to remain fixed. This technique is very useful for creating UI components like buttons, panels, containers, etc.

  • Inheritance In object oriented programming (OOP), inheritance is a powerful tool. Basically, you have a parent and children, which inherit some features from the parent. In addition, a child can also have unique features that are not shared with its parent.

More information

Home | About | Community | Start Guide | Roadmap | Notes | Documentation | 2020⠀◈⠀Blikoor | License

Home

Tutorials

External Links

Clone this wiki locally