Design & animate a pseudo 3D “Super Mario” with Zdog
Tags: javascript, zdog, design
Published: 2020-07-28 03:38:09

[[CodePen Demo](https://codepen.io/michaelburrows/pen/BajezXy) | [Original Article](https://www.michaelburrows.xyz/design-super-mario-zdog/)]

I recently stumbled upon [Zdog](https://zzz.dog/) a 3D JavaScript engine for rendering simple 3D models on the Web.

After playing around with the basic concepts I thought I’d attempt to design an 8-bit style Super Mario.

To get started quickly I just installed Zdog via CDN but it's also available as a download and NPM.

```html
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
```

Once Zdog was installed I created the `<canvas>` HTML element:

```html
<canvas class="zdog-canvas" width="300" height="300"></canvas>
```

Next a new illustration was created that will render the final design to the `zdog-canvas`:

```javascript
let illo = new Zdog.Illustration({
  element: ".zdog-canvas" 
});
illo.updateRenderGraph();
```

Here’s how a single box is created in Zdog:

```javascript
new Zdog.Box({
  addTo: illo,
  width: 10,
  height: 10,
  depth: 10,
  stroke: false,
  color: "#000",
  translate: { x: 0, y: 0 },
});
```

To create Mario I’ll need to create a series of boxes in different colors and position them via their x & y axis.

Here’s an image that shows each of the boxes (pixels) required for Mario:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qehiqubvt17g08jv3t18.png)

In total there are 144 boxes with 7 colors that will need to be rendered.

I setup variables for each of the colors:

```javascript
const red = "#ff0000";
const blue = "#001cff";
const yellow = "#fffe00";
const black = "#000000";
const skin = "#ffaa7d";
const hair = "#340d00";
const shoe = "#5d2914";
```

Then created an array to store objects with the values for each box:

```javascript
const mario = [
  // column 1
  { x: -60, y: 10, color: blue },
  { x: -60, y: 20, color: skin },
  { x: -60, y: 30, color: skin },
  { x: -60, y: 40, color: skin },
  { x: -60, y: 70, color: shoe },
];
```

This is for the first column, in total there are 12 columns (view full code [here](https://github.com/michael-burrows-github/blog/blob/master/Design%20%26%20animate%20a%20pseudo%203D%20%E2%80%9CSuper%20Mario%E2%80%9D%20with%20Zdog/script.js)).

I can now loop over each object adding a 10x10x10 box with the defined color, x & y values to the illustration:

```javascript
mario.forEach(function (block) {
  new Zdog.Box({
    addTo: illo,
    width: 10,
    height: 10,
    depth: 10,
    stroke: false,
    color: block.color,
    translate: { x: block.x, y: block.y },
  });
});
```

Here’s what Mario looks like at this stage:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0q21cg3vq3afq51htbwq.png)

To complete the design I added some animation so Mario rotates 360 degrees:

```javascript
function animate() {
  illo.rotate.y += isSpinning ? 0.05 : 0;
  illo.updateRenderGraph();
  requestAnimationFrame(animate);
}
animate();
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sx7jmt0l8imdvbtyuuf9.gif)

Hopefully this sparked your interest in Zdog – stay tuned for more tutorials in the future.