Alexandr Lysenko
Creating Flame
-
Introduction
One of the most mysterious celebrations in the Western culture is Halloween. Once a year people carve faces in pumpkins, decorate their houses, and wear costumes of terrifying beings. This tradition is noticeable in video games, and many online communities have events related to it.
It was interesting for me to make a little game with mystery. On the website for independent game developers – Itch.io – was planned a Scream Jam 2024 (October 17th through 24th), with the goal of making horror games.[1] I didn’t prepare for it, and only had general ideas.
Day 1. Three scenes with buttons, languages.
My previous game with a duckling didn’t have scenes or buttons. Role playing games often contain a character creation screen, but I couldn’t draw a beautiful character or write interesting item descriptions in seven days. My choice in developing fell on a project with user interface.
I used the three principles of objects oriented programming for creating a button:
class Button extends Rectangle {
constructor(x, y, width, height, backgroundColor, text, textColor, onClick) {
super(x, y, width, height, backgroundColor);
this.text = text;
this.textColor = textColor;
this.onClick = onClick;
}
}
new Button(50, 100, 200, 40, "brown", "language", "yellow", () => {
if (currentLanguage === "english") {
currentLanguage = "russian";
} else {
currentLanguage = "english";
}
}),The button class Button (1) inherited all properties
from the rectangle class Rectangle (which painted
backgrounds)[2], then (2) transformed it by adding
such properties of a button as text within it and function. Later, all
these properties were (3) encapsulated into separate objects.
Classical games have several menus and levels. To begin with, I added three empty scenes: menu, character creation, and level.[3] All buttons were put into arrays of the respective scenes. On mouse click, algorithm searched for any button, within which the cursor happened to be, and called a function connected to it. Thus a player went from one scene to another. Apart from this, I added a language switch, with Russian and English translations in JavaScript dictionary. Sometimes a similar method is used in creating multilingual websites.[4]
Day 2. Two items with their description.
On the following day I created a field with changing text. A short inscription on a button not always fully implies its purpose. For this reason programs and games show tips. Windows with additional information can be fixed somewhere on screen, appear near cursor, or even move together with it.
I improved my program by adding Item and
TextArea classes. Separating elements of interface into
different classes isn’t a new principle, but I thought about all
dependencies, and looked for a reasonable solution. Two rectangles
(items) and one area with text appeared on the character creation scene.
When cursor moved inside one of the rectangles, the text area displayed
the description of the respective item.
Day 3-5. Procedural two-dimensional flame.
On the third day the building blocks of interface were ready, but as before I couldn’t decide what my game was about. When users create game characters, they choose favorable traits themselves.[5] A game could exist, in which players would notice the contrast between who they wanted to play, and who they actually become.[6] I didn’t have an easy way to unify cultural differences, and didn’t want to make a game which leaves scar.
Instead of this, I created a generator of differently colored particles. They moved along a sine wave[7], and looked like a flame. The first time I saw this technique was in my childhood, when I learned to create flash games[8]. It was used to simulate smoke, but back then I didn’t understand how it worked.
In my interpretation, Flame class contains information
of that, where on screen it is, which shape and color its particles
have. New particles are placed into the list of particles of a
Flame. Each particle moves under certain rules, and
afterward is shown on screen.
class Flame {
constructor(args) {
this.shape = args.shape;
this.colorHue = args.colorHue;
this.x = args.x;
this.y = args.y;
// List for dynamically created particles
this.particles = [];
}
createParticle() {
this.particles.push(
new Particle({
parentFlame: this,
})
);
}
}
class Particle {
constructor(args) {
this.parentFlame = args.parentFlame;
}
}Day 6-7. Flame with adjustable features.
With some predefined values of variables the flame looked good enough for me, but I wanted players to select their own variant. I added buttons for changing different features of the flame. There was no best arrangement objects on screen, and I tried to keep the interface simple and intuitive.[9] The game got a name “Creating Flame”.
Update. Slider.
It was difficult to change flame properties with the help of buttons, and the game got sliders with attached values in certain limits.