Fish animation!

Today Andreas worked on the fish animation in order to make it look more realistic and alive. It was a bit tricky to get it right and it's not completly done yet, but this is how it looks now:

It's only the fishtail that is animated so far and the head animation will be added later. The goal is to create a realistic animation of how a fish looks when it jumps out of the water to catch a prey.

Screen resolution woes and frog size

Fixed a problem with the screen width being calculated wrongly for devices with more than 576 in height. This led to some funny looking fishes. The weird thing was that Steven did not have the problem, even when he tried 1920x1080 resolution which is what my Galaxy S4 has.

Changing 

      float gameWidth = screenWidth / (gameHeight / screenHeight);

to

      float gameWidth = screenWidth / (screenHeight / gameHeight);

fixed the problem for me. But logically it should be the other way around. We want gameWidth to scale with screenHeight, which is the height of the device screen, and gameHeight, which is 576 pixels, our designated game height. This change also seems to break things when running the game in an iPad’s  4:3 aspect ratio. We’re not sure what is wrong with this yet.

I also changed the frog’s and flies size slightly. The frog was being scaled in perspective to the wrong origin, it was more to the right than what we wanted and therefore the middle of the frog was not where we expected it to be when calculating the fish’s max y value.

The fly was a bit too big, almost as big as the frog, which does not make sense from a real life perspective.

I also cleaned up some old hitbox detection code that was mostly not used anymore. Before we switched to polygon hit detection we had 2 bounding rectangles for the fish and one rectangle and one circle for the frog. The fish rectangles we’re not being used at all anymore and the frog’s rectangle was being used to make the frog land on the ground. Now we use the frog’s polygon to detect ground collision as well.

Added randomised lilies, cleaned like all excess code!

BLOG POST UNDER CONSTRUCTION

So much was done today, main thing that took the longest amount of time, added randomised lilies, so that it now creates a set of 7 lilies that randomises the order 2 times every 14 lilies. This code is running smooth and can be used as a guide line to implement different pictures for example the paralax background.

We had a lot of excess code, debugging code and poorly written code in too many classes that Steven cleaned.

We added a paralax background transition that is infront of the mountains and moves a little bit faster. This is to create depth without making a perspective in the pictures itselfs.

Steven added another animation into the game, and created a state where the frog is powering up for a jump, at the moment it looks like a super saiyan charing up.

Added an onClick effect on the main menu buttons, so it now looks like they are being pressed down.

remember to clean all for loops, as of now they are hardcoded to a set number, we need to make the for loop depend on the amount of items in the list instead

Power up frame

Night and Day cycle, fish jump!

To make the game have more variety in the graphics, we are thinking about having day and night cycle. So the background would change colors to orange for example when the sun is going down, and dark blue when it's night time. The fly will become a firefly during night time and emit light to the environment. Image below shows an example of how the background could look like during evening.

We also had some progress in the animation area. A splash is added when the fish is jumping to catch the fly. The splash itself is just some lily pads that is moved when the fish jumps, a later revision would probably have som water effects.

Textures resizing to screen resolution!

Steven has been rewriting a lot of code to make the textures and game objects to calculate depending on screen resolution and not the standard resolution of 1024, 576 that is our viewport. We are trying to keep the height to 576 at all times, but scale the game width. This makes it look proportionate on 16:9 ratio for example, it looks good between 1024x576 and 1920x1280, but with a 4:3 ratio, the iPad 2 for example, the fish is a lot wider that it perhaps should be, and that is because they have a resolution of 1024x756 or something.

A bug that occured after the implementation of the new resizing code is that the fly yPosition is good at 1024x576 but is higher than it should be at 1920x1280. Debugging has not been made yet.

Fish and fly physics and stuff

Fixed fly speed calculation. Not 100% perfect, but passable. Needs fine tuning regarding what we want

the fish's position to be when catching fly.

The problem was not visualizing the game world properly. I passed the wrong arguments to the calculation method, and the actual calculation was faulty as well. Once I drew it down, it was easy to see what was wrong. It’s an easy time = distance / velocity calculation, but I used the fish’s x-position + the frog’s x-position to get the distance, which is not the correct distance from fish to frog. Since the origin(0, 0) is in the upper left corner, the fish’s x-position originates from that corner as well. To get the position where we want the fish and fly to intersect, I therefore need to subtract the frog’s x-position, not add it. 

Visualizing the speed calculation.

 

As can be seen here, the frog and fish now align properly at the frog's position(still incorrect y-pos).

I also fixed the fly’s y-position. Before we only set the y-pos to fish’s maximum position that we get from the fish jump calculations. But that is just a distance in pixels, namely the distance from the bottom of the screen to the fish’s y max. Again, the origin is in the top left corner, so the fly would be positioned according to the fish jump height but with the top as origin instead of the bottom. I changed it to set the fly y-pos to the height of the screen subtracted by the fish’s y max to get a better representation. 

 

The fish jump height being used incorrectly.

Lastly, I had to change when the calculations take place. Since the fly is reset before the fish, the calculations to get the new fly speed and y-pos needs to wait until the fish is reset as well. Otherwise it will use the old values of the fish to calculate the new numbers. 
 

Fly and fish align correctly at the frog's position with correct y-pos. Still requires fine tuning.

Fish jump calculations and fly speeds

Fixed some problems with fish jump calculations. First of all, out time calculation was off. We switched to the time calculation described on this site: http://www.wired.com/2008/12/what-angle-should-you-throw-a-football-for-maximum-range/

Secondly, we were using the wrong velocity when calculating the fish Y max value. We were using only the y component of our initial velocity vector when the formula says to use the whole velocity vector. These two changes made the jump calculation much more precise.

After that I focused on making sure the fly reaches the frog at the same time as the fish does. Since the fly is supposed to be reset just as the three objects collide, it is reset before the fish is, which leads to the fly getting more and more offset each reset. 

 

Fish jump calculations

Transitions, new fly, water lilies

We managed to do some progress today with the water, water lilies, background transition, menu buttons and the fly. The transition between the lilies and the mountain was needed because there is a big gap in terms of sizes, so we created a transition with hills and larger rocks that would lessen the difference.

The fly was replaced by new graphics that is viewed from the side rather than the top of the fly because flies are usually flying sideways :)

For the water lilies we decided to make single images of each lily which we then can randomize in the game in order to avoid that the lilies look the same all the time. Furthermore, we also changed the color of the water to a lighter, more turquoise tone instead of dark blue. This made it look more realistic.  

Lastly, all the icons for the buttons we finished. Now we just need to decide the background colors for each button.

Main menu, resolution and multiple device dimensions

So a problem with the main menu was fixed, whereas a translationVector was added to get the correct X, Y position, as the Y axis is reverted. Also a small bug was corrected with the highscore, it would seem that the spritebatch.end() was called inside of a if statement that was not always true, prompting the game to crash.

We hit a major problem today with getting the resolution to work with multiple devices. It would seem that there was some hardcoded settings in the code that made it look great on iPhone and android mobile phones. This is most likely because of the 16:9 ratio that most phones have. When trying the game on an iPad with 4:3 ratio though it made some weird graphical bugs which I though that I fixed with some small adjustments to the gameScreen and gameRenderer classes. Like changing the orthographic camera viewports and calculating a correct gameWidth. But it would seem that it instead made it look very bad and streached on android devices which has a resolution of 1920x1080. This means that we most likely need to change like everything that is hardcoded with pixels in the game. Since we originally had a viewport of 1024x576 we could hardcode objects with pixels have have it appear the same on every screen with a 16:9 resolution. But we need to make all the objects relative to the screen resolution now, and that is a lot of code to redo.

Here are two pictures of what it looks like on iphone and android with the streached version.

Iphone 5s

Samsung Galaxy S4