Adding the fishes

Keeping the age group/class of my users in mind, I decided that it would be better to get a cartoon-like illustration of fishes rather than generating them with code.

Thanks to flaticon.com I was able to get free fish icons and assets for my interactive system.

Make the fishes “swim”

I had to do a little bit of calculation here in order to make the fish objects move. My goal was to make them move from left to right and right to left.

Making the fishes move from left to right on the X and Y axis means adding +1 or any amount (depending on how fast you want them to move) to their current state on the X and Y axis.

Making the fishes move from right to left on the X and Y axis means subtracting -1 or any amount (depending on how fast you want them to move) to their current state on the X and Y axis.

The trick here for the subtraction is to position the fish at the far end of the screen by the right.

I duplicated the fish objects and inverted them so it will correlate with their movement.

Working on the movement

Like I said, its all about addition and subtraction. The same method was applied to other objects like the bubbles floating upwards, as well as the sign (which is at a fixed position).