---
# System prepended metadata

title: Webaverse 2D Design Document

---

# Webaverse 2D Design Document


# Perspectives

### Side-scroll:

A 2D game where the character moves left or right (or up and down) and the screen scrolls with them. The perspective is from the side.

![](https://i.imgur.com/fTkH5yh.png)


### Top-down:

A 2D game that provides an overhead or bird’s-eye view of the action.

![](https://i.imgur.com/okkMW93.jpg)


### Isometric:

2D games with isometric view simulate 3D geometry and a depth axis, but use an orthographic Camera instead of a perspective Camera. This gives the player a bird’s-eye view of the action.

![](https://i.imgur.com/3wX1ROy.png)


# .scn flag

Under `application/scene2D` in `content` we define the scene's 2D settings

**perspective**: `side-scroll` `top-down` `isometric`

**cameraMode**: `fixed` `follow`

**scrollDirection**: `horizontal` `vertical` `both` (If cameraMode is `fixed`)

**viewSize**: `int` (basically offset factor, the higher the further away)

```javascript=16
{
  "type": "application/scene2D",
  "content": {
    "perspective": "side-scroll",
    "scrollDirection": "vertical",
    "cameraMode": "follow",
    "viewSize": 22
  }
},
```

# Pixelation Post-Processing
![](https://i.imgur.com/bLByfaM.png)

Optimal `pixelSize`: 4 (1 - 32)

set in `application/rendersettings`

```javascript=16
"pixel": {
  "pixelSize": 4
},
```

Full example:

```javascript=16
{ 
    "type": "application/rendersettings",
    "content": {
        "pixel": {
          "pixelSize": 4
        }
    }
},
```

# Building Blocks (Sprites/Tiles)

.........
.........
.........
.........
.........
.........
.........

# Layers

.........
.........
.........
.........
.........
.........
.........

# 2D Collision

.........
.........
.........
.........
.........
.........
.........

# Scene Creation

.........
.........
.........
.........
.........
.........
.........