Drawing Dialogue:
Tutorial 1: Drawing Simple Dialogue

Tutorial 1 --> Tutorial 0
Main tutorial guide page

---

Introduction

This tutorial help you to use our Dialogue Game Engine to draw basic Dialogue

---

Setting up the camera

To draw a dialogue, you'll need to setup a separate camera to make it look static with the game scene

function MyGame() {
this.dCamera = null;
};

MyGame.prototype.initialize = function (){
this.dCamera = new Camera(
vec2.fromValues(50, 36),
100,
[70, 20, 500, 200]
);
this.dCamera.setBackgroundColor([0, 0, 0, 1]);
};

Once you have set up your camera,you can use our engine to create a dialogue

---

Setting up dialogue

To creat a dialogue, you will need to instance and draw it on the viewport of the camera you created from step 1

Declare dialogue and dialogue parser and resource

function MyGame() {
this.mDialogue = null;
this.dialogueParser = null;
this.kDialogueFile = "assets/text_introduction.json";
};

Initialize dialogue

MyGame.prototype.initialize = function () {
this.dialogueParser = new DialogueParser(this.kDialogueFile);
// Dialogue at the center of the camera
this.mDialogue = new Dialogue([50, 100/3], 90, 30, [1,1,1,1]);
// Load script for fhe dialogue
this.mDialogue.load(this.dialogueParser.loadScene("scene1"));
};

Draw Dialogue

// Ultility function to draw dialogue to a camera
MyGame.prototype.drawUI = function (camera) {
camera.setupViewProjection();
this.mDialogue.draw(camera);
};

// Update Draw function of the game
MyGame.prototype.draw = function () {
this.drawUI(this.dCamera);
};