Here’s my dialogue system for the Entity class in Entity.js
drawDialogue(context, element) {
// Draw the dialogue box and face graphic
context.drawImage(this.sprite.dialogueBox, 0, 90);
context.drawImage(this.sprite.faceset, 6, 103);
// Create a container for the text
const dialogueContainer = document.createElement('div');
dialogueContainer.className = 'dialogue-container';
// Create a text element for the dialogue
const textElement = document.createElement('p');
// Create a container for the text
const nameContainer = document.createElement('div');
nameContainer.className = 'name-container';
// Create a text element for the dialogue
const nameElement = document.createElement('p');
nameElement.innerText = this.displayName;
nameElement.className = 'name-text';
//...
textElement.className = 'dialogue-text';
textElement.innerText = this.text;
// // Add the text to the dialogue container
dialogueContainer.appendChild(textElement);
element.appendChild(dialogueContainer);
// // Add name to the dialogue name container
nameContainer.appendChild(nameElement);
element.appendChild(nameContainer);
}
}
I am only trying to add a typewriter effect to the textElement.innerText and nothing else. I am struggling to do so as I am not sure how to approach it and how to append each letter to the dialogue text container one by one.
This system works perfectly fine, as the dialogue is displayed correctly and with the correct text when the player interacts with this entity instance, however, I am trying to add a typewriter effect to it.
Although it may seem really seem to implement a typewriter effect an RPG game like mine, I am using a game loop which updates the state of the game at a constant frame rate, this method is directly called in the game loop as seen in the following code bloc:
Loop() {
const gameLoop = () => {
//Check if any entity is interacting with the player
Object.values(entities).forEach(entity => {
//If an entity is interacting...
if (entity.interacting) {
//Display the dialogue
entity.drawDialogue(this.context, this.element);
}
});
//Move on to the next frame
requestAnimationFrame(gameLoop);
};
//Call the game loop method again
gameLoop();
}
As you can see I am running calling this function when the player interacts with an NPC.
Do you have any approaches that I can pursue ensuring that my game is able to manage dialogues using a typewriter effect flawlessly? (similarly to that of Pokémon FireRed)
I have tried creating a different class for typewriter text which prints each letter one by one, but it didn’t seem to work unfortunately hence why I am asking about this issue on Stack Overflow.
2
Answers
Here’s a fairly generic solution:
Simple typewritter animation example