I wanted to give myself a challenge, by participating in Protopie's Game Prototype Challenge. Creating a working game using only the logic and tools available within Protopie.
Modern digital products often involve complex interactions. ProtoPie excels in handling these intricacies, enabling designers to prototype intricate and dynamic user interactions, such as animations, transitions, and conditional logic. This is especially valuable for crafting a intricate set of user interactions based on the user's input. As seen below you can see there a a lot of moving pieces and interactions involved in making these advanced prototypes.
Will developing, I thoroughly testing each interactive element within the ProtoPie prototype. This involves exploring all possible user interactions, such as clicks, releases, and gestures, to ensure they function as intended. By immersing myself in the user's perspective, I can identify any glitches or inconsistencies in the interactions and rectify them promptly.
I definitely struggled, making my most complex prototype yet. Using 26 active variables to help manipulate all 8 wind directions and varying wind speeds, even integrating a real-time Pythagorean theorem equation into the changing variables to help calculate the location of the flying arrow and determine the resulting score. Though figuring out the solutions to create my final polished result, wasn't simples. Below are the 3 hardest struggles I faced and how I solved them.
First was figuring out once the arrow was shot, where it was supposed to land once it was supposed to hit the target. The problem was the target zooms in as well as moves up.
I was able to solve this by tracking the initial (X,Y) of the aim tracker "userX, userY". Then once the "Shoot" command ran, we would capture the exact coordinates of the the user and translate them to "arrow_target_x, arrow_target_y" where we could find the difference from the initial target's center and multiply it by the scale in which the target expands. Lastly adding that difference to the new targets central point. Resulting in the exact impact loaction of the arrow on the new zoomed in target.
Secondly, we had the challenge of figuring out the resulting score based on our now found impact location. This problem took me the longest to think though, as Protopie can register the tangible area of an object's size though it can't register if the object is smaller than its max Width and max Height. So I struggles to calculate that the arrows impact would be on ellipse 6 rather than ellipse 7 as the coordinates fall within the max values of ellipse 7.
I eventually solved this by going back to fundamental geometry principles. Taking the current arrows X,Y we could use the Pythagorean theorem with the active arrow values minus the central point to figure out the distances of our length and height for our equation. Once we were given our distance we compared it to the variable radius of each ellipse. If the length from our equation was less than the radius of our ellipse than the coordinate was inside. We then also check if the length is greater then the next smallest ellipse and if so we now know which ring the coordinate falls into giving us our corresponding score.
Lastly, computing the diagonal wind and its effects on the arrows impact location. This was a bit tricky as we needed to find the distance of both the x and y without simply extending the coordinates based on the wind speed. We needed to find a point along the figurative circle of wind speed no matter the direction.
First we calculate the wind speed ranging from 0.0-5.0, along with the direction. For this I generated a # 1-8 and assigned every coordinal direction to each number.
1 -> N , 2 -> E , 3 -> S, 4 -> W and then 5 -> NE , 6 -> NW, 7 -> SW, 8 -> SE
Again we had to do math, this time using knowledge to help calculate our answers. We need to calculate the change in distance based on the triangle created from our coordinates. So with each direction we calculated the WindDegress to be used in our equations of sin( ) and cos( ) then multiplied by wind speed to find our change in distance. Which we add to our initial impact locations to find the arrows final location.
Designing complex prototypes in ProtoPie allows me to weave fun and intricate details into the user experience, turning mundane interactions into more impactful experiences. These nuanced touches create memorable moments and elevate the overall user engagement.
These were two small details I was especially proud of, first I created scoreboard that tracks your progress and then saves your highest score to be displayed on the home screen to encourage replay value. Secondly I made it so after a person has shot the arrow it flies through the air but once on impact its tip goes into the target and you can see it the arrow stuck. I did this by making the tip disappear on a time delay and turned on the arrows drop shadow to give it, a 3D depth.
I extend an invitation for you to explore the prototype yourself. Dive into the world of archery, feel the virtual winds on your skin, and experience the satisfaction of hitting the mark.
