Part two

Please scroll down to part one if you have not read that

Reading Foundation Games Design with ActionScript 3.0 Second Edition

Rex Van Der Spuy

All following information was referenced from the book Van Der Spy, Rex.(2012) Foundation Games Design with ActionScript 3.0 Second Edition friendsof

Notes Chapter two Making game graphics

All graphics you make in PS for your game should be best saved as PNG (Portable Network Graphics)

PNG image files are generally the best for flash games.

When using PS the best layout is Essentials which you can check that you are using by selecting 

window > workspace then just select essentials or if you accidentally arrange you essentials window just select the reset essentials option. 

Pixel

Pixels are the smallest measurable area of a computer graphic(not including vector graphics). If you zoom right into a computer graphic you can make out the pixels. Effectively a blank white canvas is essentially blank white pixels.

Now when creating a new graphic in PS you will get an interface for selecting length and width pixel amount, the higher the numbers the bigger the canvas. Also take into consent the file size will be increased also.

Creating a background

Quickest way to create a background is to select the rectangle tool and the colour of you choice either from the swatches list on the far right or by clicking on the represented foreground colour over on the tool bar on the left. Along the top of the screen the options bar is context sensitive so if you have the rectangle tool selected then you should see a fill option which you can select. After doing that simply left click and drag on your canvas to set a coloured rectangle. After doing that hit the V key on you keyboard and select the rectangle you have just made, now the options bar at the top should show an unchecked box called show transform controls, check that box and some recognizable drag handles should appear use these to scale the rectangle to the canvas. 

Gradients

A gradient is where two or more colours/shades that gradually change from one to the other. So to create a sky with depth effect you would select a darker blue and a lighter blue then you would set a gradient for a dark blue at the top to slowly change to a lighter blue at the bottom which would give the illusion of depth. To add a layer to a shape drawn by the shape tool you need to select

Layer > Layer Styles > Gradient Overlay. 

There are lots of little options here you can use to adjust the style of the gradient. They are pretty much all self explanatory . Just play around with them till you get the desired effect. 

Layers

Layers are a fantastic feature of PS They allow you to rearrange the graphics to sit in particular orders. This is good because when working on a layer it doesn't affect the other layers. When using layers in PS you can see them on the right be sure to name your layers also as it is quite easy to accidentally edit the wrong layer or loose track to what layers are what. Another feature of the layers is that you can switch them on and off instantly. You can do this by selecting the eye icon on the layers shown to you in the right tool panel. Also to note that you can lock layers also to help prevent accidental editing.

Just look for the little lock icon at the top of the layers panel.

Undoing mistakes

PS is default set to allow you to undo 20 mistakes which can be accessed in the history tab on the interface which is located at the top left of the right hand tool bar. It looks like 3 small squares with an arrow. Now if you tend to make allot of small mistakes and you feel you might use up all your history slots then the default can be changed all the way to 1000. To change this you select 

Edit > Preferences >  Performance > the you will see a interface which if you look on the right you can see history states. Set this to whatever is best for you. Another feature of the history interface on the tool bar is the snapshot feature which you can use to revert your work to that state if what you was attempting goes incredibly wrong. 

Pen Tool and Paths

The pen tool is a great way of making complex curves and shapes in PS. Using the pen tool you can place various anchor points down and they will all connect to each other. After you have placed the anchor points down you can adjust them by selecting the direct select arrow from the tool bar located two spaces under the pen tool. This is known as the white arrow tool also. A shortcut for this is with the pen tool still selected simply hold down the ctrl key and the pen tool will automatically become the white arrow while it is pressed. If you use the black arrow which is located under the same button as the white arrow then you can move around the whole path in one.

You can also add and remove anchor points by using the plus or minus pen tool all located under the same button. Once again easier still an anchor point can be deleted simply by clicking on it with the pen tool or add a point by clicking on a part of the path without an anchor point. 

Curving the paths

To curve the path you can use a tool under the pen section called convert point tool, with this selected you can click the points and drag around the canvas to curve the path. After you are satisfied or as close as you can get to what you desire release, now you can individualy select the new anchor points it has left behind to fine tune the curve.

Scaling the path

The black arrow tool can also be used adjust the overall scale of your paths. So you can scale your drawn paths bigger/smaller or wider/thinner for example.

Filling your path with colour

With the selection arrow you can right click and select fill path then select the foreground colour which will use the colour you have on the top out ot the two colour boxes you have on the left. There is also allot of fun effects you can apply to your path by selecting it in the paths tab located at the top of the layers panel. Then above that you have adjustments and styles. With the styles tab selected yo can apply numerous different of colour effects. The little button at the top right of that panel has a list icon and a down arrow selecting this will give you the option of many more ready to select fill effects.

This is just a quick mess around background I have created using the above mentioned features I have learnt from reading this book. 

This one I simply adjusted the scale

This effect was achieved by turning or colour channels

You can keep messing around with the options till you see something you like which is fun and very creative with designs popping up you had never even thought of.

Duplicating layers

To save allot of time and hassle what you can do is simply duplicate a layer. So for example you have made the left side cliff which should be on its own named layer simply right click the layer in the panel and select duplicate layer. It will then prompt you for name so name it well so you recognise it. You will notice that you now have that extra layer in the layer panel. What you want to do now is move it. Do this by selecting the selection arrow with the keyboard shortcut V then simply click and drag the layer on the canvas. 

Adjusting the layers

With the layer selected if you click on Edit > Transform you will get a list of useful options to allow you to adjust the layer accordingly. Say for example on my picture above if I duplicated the layer of the first cliff and used it instead of making another unique one then I would need to flip it horizontally to use for the opposite side. I can do this to save time and there are many things I can do anyhow to change the look of the duplicated layer to look different from the first.

Bevel and Emboss

Bevel and Emboss are effects that can be applied to give the layer/selection a more 3d effect. You can access these options by the fx button at the bottom of the layer panel with the appropriate layer selected. Worth noting as these are layer effects they are effectively altering the layer as a whole and not the actual graphics on the canvas. There are other really great effects located under the bevel and emboss section called texture. 

A nice texture effect added

Using the selection tool for shapes

A quick and easy method for creating shapes is the general selection tool which is selected with M shortcut. On the options bar at the top you have a style drop down box and you can use it if you like to create shapes of a set size. the re-clicking on the canvas will place a selection box with those exact measurements. Now if you are wanting to make what is currently only a selection box have an outline that is applied to the layer you are working on then you would simply right click within the selection box and select stroke you can now apply a defined stroke size. If you right click again you apply a fill.

Now if you want to copy the exact shape you made then with the selection arrow "V" you can simply hold down alt key and drag to create copies

I have also added a bevel effect as well on this example which is done the same way as previously mentioned

Saving your work

When saving your work you are going to want to save it in two separate formats. One in the original PS format which allows for editing later on as it save all the layers for example but is not good for flash as the file size is too big and wont be ideal for loading over the internet. The ideal file type for this is PNG. The file size is small and great for using in flash games however it is non editable so is the reason why two versions should be created. PNG is better than jpeg also as it is a high quality image file format that has a small size and preserves the transparent areas of the image. Whereas a jpeg will compress everything and sacrifice image quality. To select what you want to save as is as simple as selecting the format drop down box and selecting PNG as shown below

Using what you learnt you can mess around and make characters for you level

Adding text to an image

So lets say you want to make some buttons for you game and you make up some good button backgrounds. You now want to label these buttons you do this by selecting the text tool located on the tools tool bar then drag the desired size for the text window. The options bar at the top will then display all the different fonts, font size and other tools you can use to alter the appearance of the text.

Examples of some images with text