Monday, 10 October 2011

(Drop and Drag - Graphics 2)

Hello, I'm back with some more graphics that I hope to use in my Flash game.

This sprite is the arm of the Pylon. The aim for this is to allow the player to move this around the canvas make it easier for the Pylon to reach objects.

This sprite first started off with the idea of how the Pylon was going to move around and so I started making the metal frames first (the squares with crosses in the background.) This was made by drawing a basic black square, and then I added a silvery Stroke along the outside and removed the black area to make it see-through, to which I finally added a silvery cross and placed it inside the square. Next came the Bracket (the two small grey strips with circles in the middle, which are joined by a dark-grey line) I drew a vertical black rectangle, and then duplicated it. Next I added a gradient to them giving them a silvery-metal colour and a grey Stroke for the finish. Then I drew a small circle, duplicated it, placed it and its copy on the middle of each rectangle and gave them a dark greyish gradient to make them look like bolts. Next I drew a line, added a grey Stroke in the same tone as the bolts and then placed it in between the two rectangles to make it look like a bar connecting them. Finally, I drew the Arm, which is basically a larger rectangle with almost the same width and a darker gradient as the smaller rectangles.

When this is imported into flash, I aim to have the whole thing being able to move from side-to-side by dragging it with the mouse, although the arm will hopefully move up and down.


These sprites here are the meters for when using the Pylon. The idea for these is to display how much power is left (blue) and how much power can be used before overheating (red.)



This started by drawing a vertical rectangle then giving it a cyan-bluish gradient. Following that, I wanted to make it look like a form of energy that would be stored in a container of some sort. What I did from there was I duplicated the rectangle, then gave it a 'metal' Stroke and turned the opacity to 0%. This was done in this so that when it was imported into Flash, I could make a small animation of a glass container emptying. I then decided to make a frame for the container to rest on: I drew a horizontal rectangle, duplicated it, and then gave it a greyish-metal gradient. After that, I drew a straight line, duplicated it and added a small dark-grey Stroke, and then I attached them to the top and bottom of the two rectangles to make them look like steel bars. After I had finished, I thought it would be a good idea to add an "overheat" meter, so I did the same process as the previous meter (but added a reddish gradient), duplicated the container and added a third 'steel bar'.

These sprites are basically the surfaces of the game. The Sprite above is a kind of walkway, held up by support frames, whereas the bottom one is a representation of a concrete floor supported by a brick wall. When I had finished my interactive sprites, (Battery and Generator) I had to think of something for them to rest on, so I came up with these. The first sprite was the walkway:

This was made by drawing a very thin, horizontal rectangle and then I added a “steely” gradient to it. This was the platform section. Next I drew a second rectangle, only vertical and added a darker gradient to the previous rectangle and the duplicated it. I left that to one side for the time being so I could draw some frames (the crosses in the image.) I drew a basic small, diagonal line, gave that a “steely” colour, similar to the rectangles, duplicated it and rotated the copy so it was pointing the other way, then I placed it over the first line so it formed a cross, merged them together and duplicated it twice. I then got the two vertical rectangles from earlier and placed them on opposite sides of the crosses, merged them and duplicated it. These were my ‘support struts or beams.” I then got my first rectangle I had drawn and placed that on the top of both the “struts” to make it look more like an actual walkway. For the finishing touches, I copied the “bolts” I had used from the Bracket of the Pylon Arm, duplicated a few times and placed them along the platform. And that was the walkway done.

After I had finished the walkway, I felt that I needed something as basic flooring, something that can be placed at the bottom of the canvas. My first idea, which kind of stuck, was to have a brick wall running along the bottom.

Creating the brick wall was easy: I drew a very small rectangle and applied a grey colour overlay and thin, black stroke then I duplicated it approximately thirty times. I then positioned them to make a wall layout effect and then merged them all together. Finally, I placed the same rectangle I used as a platform for the walkway on top of the wall. This is what became the floor sprite.

And that's about it for now. Until next time...

No comments:

Post a Comment