Animated Sprite Interface - adding libraries in p5.js
I ended up doing 1.5 sketches this week because I dove into the play.js library and wanted to see all that it can do. The first one I completed in a night while watching Netflix, so it didn't seem like much. The second one, documented below, is a very broken game I worked on throughout the week, and I have intentions to develop it into a final project.
My first sketch is a controllable Ken sprite from Street Fighter. The user can make him move left and right and make him perform a Hadouken (a, d, and space keys, respectively). When a Hadouken is performed on the "hit me" button, a new window will open with the front page of my neocities website. I run a previous sketch in the background to make the scene less boring. This sketch demonstrates the following:
Process:
After some reading, this is relatively simple to pull off. First step: getting the animations ready. This required finding a sprite sheet and analyzing it with p5. I seached "Street Fighter Sprite" and Ken answered the call. Unfortunately, I could not get p5 to actually read the sprite sheet and parse it into an animation. This forced me to go down the more labor-intensive alternative: edit and save each individual frames of the animation. Between the three animations (idle, walk and Haduken), I hand-processed 32 frames using Photoshop, which involved lining up the images, maintaining proportions and organizing the images into files. I rushed this step after a couple frustrating failed attempts (sometimes my sizing would be off and make the animations stutter a bit), so the final result has a few flaws.
After a made a sprite with some animations, I set up some keyboard controls to make Ken move around and trigger different animations.
I used Photoshop to make a quick "hit me" button and assigned the image to another sprite.
The button sprite detects an overlap from the Ken sprite. If this overlap occurs while a Hadouken is triggered, a window opens with my website's URL passed to it.
To make the animated background, I simply pasted the necessary code from a previous project.