AINT207 - Design Process

This is a blog of my progress throughout the module of AINT207.

[njanman-blog]

Audio!

Implementation!

I have implemented an audio file in to my game! I choose a file from freeSFX.co.uk and downloaded the file as an mp3. The music starts playing when the Game.js file is loaded, after the button click on the start screen!

[njanman-blog]

Main Menu!

Design/Implementation

I have now designed and implemented a main menu for my game! I have just taken the original background image and made it 30% transparent, as if to give the illusion of a start screen. There is also a button that I have designed myself, so when the game first loads, the start screen appears, then the player will click the start button, there is a bit of lag as the image size is huge. But it works! If I have time, I may implement a timer, so when the game state is loaded there will be a count down, “3″, “2″, “1″, “GO!”. I only have one hour left so I may not be able to do this as I need to complete my GDD for the demo later today.

[njanman-blog]

Running out of time!

Concept

I have quickly ran out of time to complete the concept properly. Amongst having other coursework to complete, I have had to work in my part time job, and this has resulted in not being able to implement the concept as I would have liked to. Essentially, there is no concept to this game. The idea was to make it a time trial and record the players time around the track, doing a certain amount of laps, however, as I said, I have not implemented this and so the sole aim of this game is to just race around the track until the player gets bored! I am quite annoyed that I have not had the time to do this as I think that without a real aim of the game, it is fairly pointless. However, the game plays well and so I think it will still be an enjoyable racing game.

[njanman-blog]

Final Design

Design

This is my final design for my track. I feel that the majority of it looks quite good and will give a better perspective to the player when racing the car around the track. If I had some more time, I would look at some other ways of doing the graphics but I think in the time frame that I had, this is actually a good design. I have tweaked a few little things such as the deepness of the water and where it is deeper.

[njanman-blog]

Grandstand

Design

The grandstand is the final piece to my puzzle of a circuit. I took a little inspiration from other grandstands from race tracks, and I come up with the above. The bigger squares of red and white indicate sections of seating and the smaller squares inside this represent individual seats. Originally, I was going to add in more spectator stands around the circuit, however, I think that this one grandstand fits in well and no other stands are needed. I feel this looks quite good and fits in well with the circuit.

[njanman-blog]

Grass

Design

Next up is the grass! I don’t feel that this looks as good as some of the other parts, but it is the best I can do! The regular green indicates normal grass, the dark green indicates foresty areas, the lighter brown is to show more worn grass, the muddy brown shows muddy grass and the other bluey green shows new grass that has been laid. As I said I don’t really like the look of the grass but I think it is good enough for the principle of this project!

[njanman-blog]

Water

Design

As you can see from the image above, I have put in some water in the middle of the track. I done this by using the pen tool and creating a shape around the inside of the track. To fill it, I have used the radial gradient tool. I feel this works well as it creates the illusion of deeper water in certain areas. In addition, where the black circle is, there is sand, and I have made 2 small shapes on the edge of the sand and filled it with the lightest blue from the main water, I then made it more transparent as to create the illusion that the water is very shallow on the edge of the sand. I feel that I have made good progress on the graphics and I also feel that it actually looks quite good!

[njanman-blog]

Barriers

Design

The barriers are demonstrated by the black lines around the outside and inside of the track. You can also see where I have placed the sponsor banner. I feel that adding barriers to the track gives the player a sense of the track bounds, although I have not implemented them. By this I mean that the car can still drive over the barriers. Next up is some water.

[njanman-blog]

Sponsor Banner

Design

I have decided to have a floor banner that will be placed on one of the run-off’s around the circuit. I have also put faint text “Circuit de Catalunya” over the start-finish straight. Next up is the barriers.

[njanman-blog]

Sand and run-off areas

Design

I have looked at the real Circuit de Catalunya, and I have taken inspiration from this for where to place sand/gravel areas and some run-off areas. As you can see from the image, there are quite a few sandy areas, but only a small number of run-off areas, this is the layout of the real Formula 1 circuit. When the car goes on any of these, it will still slow down as much as it did before, there is no difference, even though the run-off’s are essentially tarmac, the car will still slow down as it is not on the track. The next thing for me to do is a sponsor type of banner!

[njanman-blog]

Kerbs

Design

After attempting the kerbs, I have come to the realisation that they will not look very in the corners as I cannot find a good way to make them look like kerbs. On the straights of the track, it is fine, but if I put them there I will have to put them in the corners as well, otherwise it will look a bit odd! Therefore, I will not design any kerbs for the track. Next up is sand and run-offs!

[njanman-blog]

My chosen graphical method

Design

So, I have chosen the method I will use for the graphics and I will create my own, and they will be animated, rather than looking at all realistic. Although I am still struggling with how exactly I will do this, but I will do some research and have a play around with Illustrator. The first thing I will attempt is putting in some kerbs! Stay Tuned!

[njanman-blog]

Graphics...

Design

So the graphics is the next thing I’m working on. Now, there are a few possible solutions to this, but first I needed to decide what type of graphics it would be; realistic or animated/cartoon? I have chosen animated, now there are 2 ways I can do this; 1. Take real images and place them on the track or 2. create my own using Adobe Illustrator?

[njanman-blog]

Slightly larger track

Design

I have made a slightly larger track, as when testing the game, it was a bit too easy not to go off the track. Now the track is wider, the car needed to be a bit bigger, so I scaled the car car up a bit, from 0.3 to 0.4. Seems to make it more challenging at the moment. May need to change it again though. I am also in the process of creating the ‘real’ graphics for my game now.

[njanman-blog]

HALLELUJAH!!!!!

Implementation

I have finally made the bitmapdata work!! After many discouraging weeks and thoughts of massive failure, I have proved that I am not as bad at this as I thought I was. Although I have asked for A LOT of help from Ben, and stackoverflow, I feel that my persistent testing has lead me to solving this issue.

So how did I do it?

Firstly, I had to declare, ‘this.currentMatCol’ and ‘this.roadMatCol’ at the very top of the game.js file. Then, I had to set ‘roadMatCol’ to black “        this.roadMatCol = new Phaser.Color.createColor(0, 0, 0);” in the Create function. In the update function, I had to use the following two lines code:

“var currentMatCol = bmd.getPixelRGB(Math.round(car1.x), Math.round(car1.y));” - This gets the pixel at x and y of the car as an RGBA value. “var roadMatCol = {r: 0, g: 0, b: 0};” - This sets ‘roadMatCol’ to black.

Next, I had to create an ‘if’ statement to check if ‘currentMatCol’ was equal to ‘roadMatCol’: “if (currentMatCol.r == roadMatCol.r && currentMatCol.g == roadMatCol.g && currentMatCol.b == roadMatCol.b)”

So, if the colours were the same, then the car would handle how it should, I inserted the button actions in here. But if the colours were not the same, the car would handle differently. I inserted the same button actions in here but I halved the speed of the car.

I am now debating what to do next with the game. Do I start the proper graphics and menu, or do I continue with some more functionality (checkpoints etc)? Stay tuned!

[njanman-blog]

Car is too slow!

Implementation

Through my testing of the game, I found that the car was too slow, making it too easy for the player to race around and not go off the track. At first, I thought it might be to do with this if statement:

if(cursors.down.isDown)        {          this.game.physics.arcade.velocityFromAngle(car1.angle, 200, car1.body.velocity);        }

and I thought I had to change the ‘speed’ of the car from 200 to something higher. This didn't work. I couldn’t figure out why, so I changed the max velocity setting in the create function, this didn’t work either. Then I changed the drag setting in the create function. Again this didn’t work. After looking through my code for about an hour solid, I realised that I was changing the backward movement and I was testing the forward movement.

So, the first thing I tried, worked. But I was testing the backward movement so I changed the forward movement and now it works fine.

I also changed the scale of the car to make it bigger and more tricky to keep it on the track!

[njanman-blog]

Relaxation!

I am having some time off from uni at the moment, and will not be working on any projects, including this one, for about a week. It is Easter after all. I will be working also. I should have some updates by the 7th April.