Fun Learning Game

I finished the game! :D
Added sound effects for:

• Clicking buttons
• Player attacks
• Phoenix attacks
• Phoenix caw (to signal to the player that a barrage of projectiles is coming if they are too busy with the attack button)
• Background music!

The quiz
I finally added real questions! I wanted to focus on spelling for this one, so I used emojis and asked the user how the words representing them were spelled.

Text stuff

• Added text instruction at the beginning
• Changed fonts of the text nodes featuring emojis (more on that later)

Web shenanigans
I wanted to make sure that the game would be available on devices that did not support downloading .exe (like chromebooks, for example).
But uh…that was harder than I was expecting!
I used netlify to create a url after exporting the game for html5. The first issue in business was that the camera was zoomed out when the website was launched, showing the gray blank space of the Godot dimension. This took a bit to figure out, but apparently I had to adjust the stretch mode and aspect in project settings.
The second issue was that the emojis were showing up as white-boxed hex codes in the web version (for some reason!! >:( ). Turns out that I needed a different dedicated font for the emojis so that they could be compatable on all devices. Oh well, haha. At least it’s more accessible! :D

(PS. I’m sincerely sorry for the terrible audio quality in the video, I can’t screen record and the speakers on this computer are outrageous :’) )

I’m so close to finishing the game! First of all, I finished the attack system.
Basically, you answer a certain number of questions under the “attack” button, filling up the bar next to it. When it fills up, you unlock a new weapon. After it cools down, you can use it; but on the first time of cycling through every weapon, only once! As you complete more cycles, though, that increases to twice, then three times, etc.
I also added pixel art to the buttons. I took away the “attack” label of the attack button because the students I tutor don’t know that word yet. Instead, I used an animation in hopes of incentivising them to click it.
The other buttons include:

• The arrow
• Two arrows
• Copper sword
• Diamond sword

Which brings me to my next development––when you click those buttons, there’s an actual attack! An arrow animation, a two-arrow animation, a copper sword animation, etc were added to the mix.
I hope to add music, SFX, and maybe simple instructions for the future.

Finally, I implemented a losing and winning screen using the same node in the system, detecting player and enemy health.

I added functionality to the attack system! Now it can:

• Show the question and input text box when the attack button is clicked
• Detect correct answers and wrong answers

I also added:

• An attack bar that stores how many answers you got correct. Once you’ve answered a certain number of questions correctly, I plan for a button on the left to unlock
• You may already notice the buttons in the bottom left! When I filled the bar once, one of the buttons unlocked, a timer ran out (signified by the white bar), and I could click the button.

For the future:

• The buttons you have to unlock are actually buttons that allow you attack! So I’ll add different attack functionalities to different buttons.
• The buttons look kinda bland. I’m planning to add some sprites in place of the buttons.
• I’m thinking of putting some transparent gray space behind the text to make it more readable.

I really hope I can finish this game next devlog! Seeya there! :)

I’ve put some of the pixel art into the game, and it’s looking good!
The thing about the prototype is that it didn’t consider scale or size, so I had to change:

• The placement and zoom of the camera
• The size and tween animations of the quiz questions
• The player and enemy sprite + hitbox size

However, I also finished:

• Health bars for the player and boss
• Tweens that would smoothly adjust the health (which was why the red health and the bar were drawn separately)
• Areas where the projectiles would be slow or fast. Initially this was controlled by timers, but I found that this was too buggy for my mom’s computer, so I just used area detection instead to make everything more consistent.

For the future, I added:

• An attack button
• A text input box (line edit node)
• An area for the text questions (label node)

For now, there is no function yet, but this will be used for an attack system. How it will work is that, when you press attack, you are given a question requiring a typed answer. Answering it correctly would send a powerful attack to the enemy, while answering it wrong would decrease your health by a little bit.

Looking forward to implementing this system!

(Also don’t worry, I’ll def add pixel art for the player and the arrows trust :D )

Wowee, I finished the background!
I mostly worked on the tiles and shadows, which I hope makes the environment more immersive and detailed. I also added in some of the complete assets into Godot!
While I still have some pixel art to work on, such as:

• The player
• Arrows
• The projectiles exploding animation
  I think now is a good time to take a break from Aseprite and work in Godot.
  Since the pixel art is already way smaller than the original prototype, here’s what I need to work on:
• Adjusting the game code to the new screen size
  • Slowing down projectiles and adjusting the time when they slow down
  • Changing the question tweens so that the text doesn’t fly off the screen
  • Changing player position
• Adding in the health bar sprites with functionality
• Implementing animation phases for the boss (play this animation when attacking, play this animation when idling, etc)
• VFX and SFX

Worked on the background environment. Added:

• Pillars
• Doorway
• Brick texture
• Shading
  The most difficult thing for me is to make every element fit together. I hope I can finish the background today and probably work on the player and arrows. I also just realized that I should probably work on the projectile dissipating animation, too. Off to work!

After completing the phoenix (finally), here’s what I finished:

• The projectiles emitted from the boss. I wondered what it should be—a rock? A magic orb? Before realizing that it was a phoenix we were talking about, and that flames were basically their signature! I also added frame-by-frame animation to add more life to it.
• The boss health bar! It’s noticeably larger than the player’s, with a similar flame animation as the projectiles. It doesn’t have that gold sheen, but I hope it has its own unique style that gives off phoenix vibes!

What I’m working on:

• The background! I’ve only created two pillars, but I’m planning on an entrance to a temple. To make the colors blend more together, I actually used the jumble tool! (The enemy is there as a reference to the size proportions)

What I plan to do after finishing the background:

Besides more pixel art (player, arrows), I want to implement the art into the game! The game’s framework is basically done, though I’ll definitely add more features so that it isn’t so repetitive. I also need to work on the health bars, which is exciting! :)

I’ve finally finished the phoenix! After finishing shading, I separated the key elements—head, body, wings—into different layers so that I could animate easier. Then I used the select tool to move and rotate the parts before fixing up the pixels. Unfortunately the wing feathers look wonky, but I’m not too sure how to approach that.
After implementing ease in and out, here’s what I’ve completed:

• An idle animation (first four frames, and then reverse)
• An attack animation
• A transition to glowing eyes!
• A sudden burst of flame

What I’ll be working on:

• The background pixel art
• The projectiles
• The boss health bar

(The video has a clideo.com watermark because I needed to compress the video :( )

Today, I worked more on the phoenix’s wings and legs. I haven’t finished yet, but hopefully I’m close!
Here’s what I’ve done:

• Fleshed out the shading and made the wings bigger two times
• Shaded the foot
• Added tufts to the phoenix head

This has all been to make the bird look more like a phoenix! I’ve gotten criticism that it looks like a chicken, so I tried to make the proportions more accurate, sharpened the feathers, and tried to make the features fancier.

I am told that it still looks like a chicken! Unfortunately, I’ve decided not to add flames, or make the bird thinner, or make the wings bigger (again), because this has already taken far too long! I haven’t even started animating yet! XD

That’s not to say that these aren’t valid criticisms. These are very good suggestions, but I’d like to move on to other game art, not just the boss.

I plan on finishing the art and at least starting animation, so that I can work on projectiles, the player, the boss health bar, etc! :)

Worked on the beginning boss of the game! I aimed to draw a feng huang — or phoenix — in Aseprite, but whoa, that took a lot more energy from me than expected! I focused on the head and body.
Issues:
Being a beginner in using Aseprite (I usually use pixilart.com) I didn’t remember to save :(
I worked for about an hour on the face, but after my break and returning, I found that my work hadn’t saved!! Lesson learned: save every few seconds :P
Design:

1. After pasting the player health bar inside for a size comparison, I first blocked out the shape of the phoenix using a large 3x3 or 4x4 brush, with the main color.
2. I started using a darker color to block out the features of the bird—feathers, eyes, etc…
3. Then I attacked the birdie with bands of shading and lighting for each section of feather or eye to give more depth
4. I decided to split the workflow into two different parts: the head and the body. You can notice how the feathers on the body look very different (and probably more wonky) from the feathers on the head and neck. Later this will help me separate out sections for animation :D

What I should work on:

• Making the wings bigger (I am told that the phoenix looks like a chicken. )
• Finishing the details of the feet and wings
• ANIMATION! Including:
  • Idle
  • Attack
  • Damage

I wonder how long that will take…haha…

I finished the player health bar in Aseprite!
Design choices:

• The main mascot? Character? Of this educational game is a tiger. I wanted to reflect that while also taking inspiration from Chinese traditional lions (like those door knockers!) so here is a weird mashup! Lion? Tiger? Liger? No one shall know >:)
• I made it gold because yellow would definitely pop on the screen, which I hope would make it easy for players to locate on the screen. Also, gold gives a more heroic vibe :D

Animation

I wanted the animation to be simple, so it wouldn’t distract from the main game, but easy for the viewer to locate when needed. So I created a shiny light that travels across the bar using easing in, easing out, and smear frames! The plan is for this animation to occur from time to time, reminding the player of their health while also not being too distracting.

Where is the actual red health?

• The red health is in another file, separate from the health bar
• The plan is to be able to crop out the red health as the health decreases, while ignoring the background bar. This allows for stylized health bars but fluid health decreasing/increasing animations!

Now I have implemented a sort of “quiz” system.

Added features:

• Arrays containing questions, choices, and corresponding correct answers
• Randomly chosen questions featured one at a time
• Detecting whether the player has shot the projectile featuring the correct answer, in which all the projectiles will destroy themselves
• Playing these features in a perpetual loop

Features needed to be added

• I definitely need to add health to add some risk into the game!
• Art will play a big part in making this game fun :)
• EFFECTS - Such as screen shake or particles!

After getting the gist of Godot from Brackey’s tutorial, I decided to switch gears to a boss-fight type of game!

What I added:

• The player rotates to face the mouse, allowing for aiming
• Left-clicking, or just simply tapping on the mouse pad, for shooting
• An area node for the boss
• A question appears on screen before triggering projectiles
• Projectiles from the boss, the number of which can be adjusted, are designed to be distanced by the same angle (ex 180/n, n being declared)
• A system using timer nodes that slows the game for a certain amount of time—allowing for the player to carefully aim and shoot—before returning to normal

Why these features?
Here’s the plan:

1. The boss idles for a random amount of allotted time
2. The boss then attacks! A randomly selected question—asking about adjectives, nouns, spelling, etc—appears on the screen.
3. After being given enough time to read the question, projectiles with the answer choices are shot towards the player.
4. If the player shoots the correct answer, the explosion harms the boss! But if the player shoots the wrong answer, the projectiles hurt them.

I hope this makes learning English fun, but slightly fast-paced. Clearly I still have a lot to add! :)

Learned how to use Godot from the classic Brackeys tutorial: adding player movement, idle animation, tile set (testing), one way platforms, and moving platforms. Also created little tiger character as player! Need to add death, walking animation, better physics, and collectibles. Was hard for me to understand scenes and nodes but very rewarding in the end! :) Also planning to add the educational elements soon…