Create a new document in Adobe Illustrator and use the Rounded Rectangle Tool to draw a rounded rectangle on the art board:

Tip: If you need to adjust the roundness of the rectangles corners, you can use the UP or DOWN arrows keys whilst drawing out the shape.

This will form the mushroom character’s main body, and therefore we need to make it taper outwards slightly towards the bottom. Use the Direct Selection Tool (Shortcut: A) and draw a rectangle over the top half of the rounded rectangle to select the anchors/nodes at the top of the shape only. They will show as dark blue now, whereas the unselected anchors/nodes will show as white.

Right-click on the shape a select Transform > Scale and then scale it to about 85%:

Draw a large circle over the character’s body using the Ellipse Tool and holding SHIFT:

Using the Direct Selection Tool (Shortcut: A) select the anchor/node at the bottom of the circle only. Now, drag that anchor point directly upwards to manipulate the circle so that it looks like this:

We now have the character’s head. You can see that at this point, using just a few simple steps, we’ve already achieved the outline of our character. Let’s start adding some detail.

Draw some circles over the head of the mushroom, overlapping the edges with some of them like this:

Hold down the SHIFT key, and use the Selection Tool (Shortcut: V) to select all of the small circles that you’ve just created. Right-click and select Make Compound Path.

Select the head shape and copy it by pressing CMD+C (Mac) or CTRL+C (PC). We want to place a copy of the circle in the exact same location,  so rather than pasting in the normal way (CMD+V), we will use the option to ‘Paste In Font’ using the shortcut CMD+F (Mac) or CTRL+F (PC). Although it appears that nothing has happened, you now have two identical head shapes – the top most will be selected.

Hold down SHIFT and click on one of the small circles that overlaps the edge of the head so that both the uppermost head shape and all of the small circles are selected:

Make sure that the Pathfinder window is open in Illustrator (Window>Pathfinder) and select the Intersect option. The overlapping edges should be cut away:

An simple ellipse will create an eye, and a copy of that will create the other:

Now to add some colour. Select the head shape and fill it with a radial gradient from light green to a darker green:

Tip: You may want to play around with the size, rotation and position of the gradient using the Gradient Tool (Shortcut: G) to get the desired effect.

Select the body and again apply a radial gradient, using the Gradient Tool (Shortcut: G) to get the desired effect once again.

There we have it, a retro-looking, Mario-style 1UP mushroom character. Easy.

Yesterday Apple just unveiled the much anticipated  (and rumoured) iPhone 5S, keeping with their standard naming convention of adding an ‘S’ to the previous incarnation. No surprise there.

However, what wasn’t as expected (although rumours had surfaced several days earlier), was the announcement of the iPhone 5C. Let’s take a look at what it offers and how is stands up against the new iPhone 5S:

The Colours & Design

The iPhone 5S retains the look and feel of the previous iPhone 5 – sleekly constructed from aluminium and available in the familiar white and black (‘space grey’ now apparently), but also now available in a gold colour.

The iPhone 5C couldn’t be more different in look and feel though. Available in 5 bright colours, it’s slightly larger, but only in terms of millimeters, but it’s noticeably heavier weighing in at 132g, 20g more than the 5S. This is due to the construction which is of polycarbonate with a reinforcing steel structure underneath, which also doubles as the antenna.

Beautifully, unapologetically plastic

The Display

As expected, both new iPhones feature the same 4-inch touch-sensitive Retina display that debuted in the iPhone 5. The resolution remains unchanged at 640 x 1136 pixels with a pixels per inch rating of 326 meaning that the screens are crisp and clear.

The Specs

In terms of the tech specs under the hood the iPhone 5C rocks up with the same A6 processor that we had in the iPhone 5, whereas the 5S sports a brand new A7 chip with 64-bit architecture.

On the 5C, you’ll also get an 8MP rear facing camera with f/2.4 aperture and single LED flash, 1.9MP HD front facing snapper for Facetime as well as LTE, Wi-Fi a/b/g/n and Bluetooth 4.0 connectivity.

 The Release, Price & Availability

The iPhone 5C release date has been confirmed for September 20, and if you fancy getting you’re hands on a SIM-free iPhone 5C it’ll set you back $549, £469, AU$739 for the 16GB version and $649, £549, AU$869 for the 32GB model. On a two year contract deal – the 16GB model will set you back $99, while the 32GB version costs $199.

It will be available in 10 countries to start with – the US, UK, Australia, Canada, China, France, Germany, Japan and Singapore – and by December 2013 you’ll be able to pick up the iPhone 5C in over 100 countries, spanning 270 different networks.

The Color

In addition to the standard white and black (which has been rebranded as ‘Space Grey’ by Apple), there is also a new gold version.

The Cost

The iPhone 5S release date is September 20th,  and you will be able to pre-order from September 13th.

The iPhone 5S is going to cost £549 (US$649, AU$869 SIM-free) for the entry-level 16GB model. Meanwhile the 32GB version is £629 (US$749, AUD$999) and the 64GB version is £709 (US$849, AUD$1,129).

For two-year contracts, Apple says US pricing set at $199 for the 16GB model, $299 for 32GB and $399 for 64GB.

The Processor

The iPhone 5S is rocking an A7 chip with 64-bit architecture. This monster of a processor is the first of it’s kind, and according to Apple,  packs twice as many transistors in a piece of silicon roughly the same size as the previous A6 chip.

Apparently, there are over a billion transistors in the A7, and it supports both 32-bit and 64-bit apps, making it an incredible 56 times as fast as the original iPhone and 2x faster than the previous generation in both CPU and graphics performance!

Featuring OpenGL ES 3.0, this enables visual effects previously possible only on computers and gaming consoles. Of course, Apple was keen to demonstrate the gaming prowess of the handset with the new (and apparently, concluding) Infinity Blade 3.

 The Coprocessor?

That’s right, Apple also announced the new M7 coprocessor, which is designed to make iPhone 5s even more efficient. It offloads work from the A7 chip by collecting motion data from the accelerometer, gyroscope, and compass. Apps can then use this data without constantly engaging the A7 chip. With M7 being engineered for this specific task, it uses significantly less power than A7 would require. So again, battery life is spared.

Developers can access new CoreMotion APIs that take advantage of M7 to create even better fitness and activity apps than we have already. Apple claims it goes “well beyond what other mobile devices offer”.

The Camera

The camera is the same 8 megapixel resolution, but it sports a bigger sensor featuring a ƒ/2.2 five element lens (designed by Apple) to let in even more light – a 33% increase actually. There’s also auto image stabilisation, fast auto-focus, dynamic auto-axposure 28MP panoramic mode and a 10 frames per second burst mode.

The long-rumored dual-flash is indeed part of the iPhone 5S’ camera – utilising two LEDs, one white and one amber. The camera assesses the colour temperature of the scene and determines just the right percentage and intensity of white light versus amber light you need — using over 1000 unique combinations. The result is more true-to-life colours.

Video is 1080p, and there’s even 120fps 720p slow motion, too.

Touch ID

A fingerprint security scanner, really? Absolutely. The home button, now made from laser-cut sapphire crystal, directs the image of your finger to a capacitive touch sensor, which scans (at 500ppi no less) beneath the outer layers of your skin to get a detailed print.

There is also 360-degree readability so you wont have to reorient your finger every time you want to access your phone, or purchase from the iTunes Store, App Store or iBooks Store.

Touch ID [is] a simple and secure way to unlock your phone with just a touch of your finger.

All fingerprint information is encrypted and stored securely in the ominously named Secure Enclave inside the A7 chip

It’s never stored on Apple servers or backed up to iCloud

Conclusion

Over the last couple of years, I’ve always felt a bit disappointed when Apple release a new version of the iPhone – particularly the ‘S’ incarnations.

However, this feels different. The new feature set doesn’t seem to be tacked on and gimmicky, but actually stepping forward with innovations in the way that only Apple have traditionally done. These features are innovative – and useful. In my mind Apple just stepped up their game, and went back to the forefront after losing ground over the last few years. Your move competitors…

What Do You Think?

Agree or disagree – it doesn’t matter. Let us know your thoughts below…

In this post, we’re going to look at creating a stylish volume control knob – not your average of/off toggle – but an expensive looking, shiny, modern, brushed steel one that will allow us to control the volume in increments of 1%. That way, the user can fine tune the preferred in-app volume level. We could even go on to create a separate control knob that only controls the sound effects volume separately from the main background music for even finer tuning.

The user can ‘grab’ and rotate the control knob using their finger to control the volume of the background music track. As they do so, the LEDs switch on or off in real time depending on the volume level.

The project includes not only the fully commented code, but also the layered PSD files that we created in another art tutorial, along with some other design elements that we have created in Adobe Photoshop (i.e. a carbon fibre background, a bezel setting, some LEDs for illumination etc).

All code and artwork can be downloaded below, and you can feel free to use anything in the project for your own use.

Open a new document, and select the Ellipse Tool (Shortcut: L). To draw a perfect circle, hold down the SHIFT key, click and hold the left mouse button and drag outwards. It will start to draw a circle on the screen. When at a suitable size, release the mouse button, and then the SHIFT key.

Now, select the Gradient Tool (Shortcut: G), and fill the circle that you’ve just created with a simple white to grey radial gradient:

Next, Let’s add some colour to the eye. Select the circle you’ve already created and copy it by pressing CMD+C (Mac) or CTRL+C (PC). As we want to place a copy of the circle in the exact same location, rather than pasting in the normal way (CMD+V), we will use the option to ‘Paste In Font’ using the shortcut CMD+F (Mac) or CTRL+F(PC). Although it appears that nothing has happened, you now have two identical circles – one on top of the other.

Select the top circle by clicking on it and then make it smaller by holding down the SHIFT+ALT keys, left-clicking and holding on one of the corners of the bounding box, and dragging inwards. When at a suitable size, release. You’ll now clearly see the two circles:

Using the Gradient Tool once again, change the fill to a radial gradient of any colours you wish, starting with a light colour in the middle, and moving to a darker shade:

For the pupil (dark inner part of the eye), we can simply create a smaller circle in the middle by repeating the steps that we have just done above. Select the circle you’ve just filled with the gradient, copy it, and use CMD+F (Mac) or CTRL+F (PC) to paste a copy of that circle above the old one. Resize it, again holding the SHIFT+ALT keys, and then change the gradient to a grey to black radial gradient:

At this stage, we already have a great looking cartoon eye, and we could even leave it  here, but we won’t. Let’s add a little reflection to the eye to make it look a little more polished.

Holding the SHIFT key, draw a small circle overlapping the pupil and the coloured part of the eye. Set it’s fill to white, remove any stroke if there is one, and set the opacity to around 75%.:

Copy and paste that circle, resize the copy to make it slightly smaller, and reposition it so that it is below and slightly off-centre from the original:

Now, we’re done. Congratulations on your first reusable game art asset.

Why not have a play around with the colours and shapes using some of Illustrator’s other tools and see what other eyes you can create. Make a whole bunch of them and save them for use in your game projects later.

If you’ve not used Illustrator much before, or could simply do with a refresher course, then don’t worry. Adobe TV, in conjunction with the great Lynda.com, released two great (and free) online mini courses that provide just that. They are:

Learn Illustrator CS6

We recommend watching through the entire course playlists, but as a minimum we recommend that you watch through the following:

What is Illustrator?

Features of the Illustrator Workspace

Setting Up a New Document

Using the Selection Tools

Essentials of the Pen and Pencil Tools

Using the Blob Brush and Eraser Tools

Creating Objects with the Shape Tools

Mastering the Appearance Panel

What Is A Raster Graphic?

A raster, or bitmap graphic is generally an image file that is represented in terms of a rectangular grid of pixels (tiny squares) – each capable of storing it’s own colour value (and opacity). These tiny pixels collectively make up the image. They are generally used for web graphics, photographs and digital paintings and typical file formats include JPG, PNG and GIF.

Adobe Photoshop is an example of raster graphic manipulation software. The millions of individual pixels that  can be contained within a single raster graphic can be manipulated individually allowing for an infinite number of effects to be applied.

The downside to this is that, as each individual pixel stores it’s own data, file sizes can be very large for big, complex images.

Another, very important drawback to a raster graphic is that they are resolution dependant. This means that they cannot be scaled up without any loss of quality to the image. If you were to take a raster graphic and double it’s height and width for example, it’s number of pixels would stay the same, but their size would all increase. When this happens, the individual square pixels can be seen which gives the image a ‘jagged’ or ‘pixelated’ look as demonstrated in the below image:

In the above image, the raster copy of the original logo has been scaled up to 4 times it’s original size (400%). The result is a blurred, pixellated image.

What About Vector Graphics?

Vector graphics are not made up of individual pixels like raster graphics are. They are composed of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions.

Vector images are made up of paths, or ‘strokes’, which lead through locations called control points (‘nodes’). Each of these points has a definite position on the x and y axes of the work plan. Each point, as well, is a variety of database, including the location of the point in the work space and the direction of the vector (which is what defines the direction of the track). Each track can be assigned a color, a shape, a thickness and also a fill.

Adobe Illustrator is an example of vector graphic manipulation software. As the image is defined by mathematical equations and data, they can be scaled to any size with no detriment to the image quality – the equation is simply scaled and recalculated accordingly and the image rendered correctly. This is demonstrated in the following image:

In the above image, the vector copy of the original logo has been scaled up to 4 times it’s original size (400%). The result is a smooth, crisp image.

Another advantage to vector graphics is that the data within simply contains a mathematical description, rather than individual data for millions of individual pixels, the file sizes can be very small in size. Scaling a vector image up does not increase the file size as the mathematical description remains fundamentally the same as the original.

Finally, vector images also have the advantage that they can easily be converted to raster formats also.

This is particularly true in the current climate, where nearly 17,000 app submissions are made to the App Store each month, and where the behemoth games studios (EA, Zynga, PopCap) with multi-million dollar budgets are taking over the various app stores.

So what’s the answer here, when as a general rule, Indie Developers are working with little or no budget at all? How can we compete? How can we catch the eye of the App Store customer being lured relentlessly by the high-end, expensive, ‘AAA’ art and production teams of the App Store fat cats? The answer is, it’s tremendously difficult – but not impossible.

The most obvious answer for the programmer is to outsource the art. But as we are aware, having an artist produce your artwork can be very expensive – prohibitively so in many cases of the Indie. Good artwork for a game is not cheap, and rightfully so when you consider the number of sprites, backgrounds, assets that an average game may require.

That leaves us with little or no choice but to create some or all of the artwork for our games ourselves. It’s all too easy for the Indie to say ‘we can’t compete with the AAA’s', and put little effort into the aesthetic polish of the game, relying on the gameplay to win the day. In most cases (probably 9,999 out of 10,000 App Store purchases), that won’t be the case. Customer’s come for the aesthetics, and stay for solid gameplay. Successful games and Indie Developers need both.

And so, we come to the point of this post. This blog will aim to provide the Indie Developer with a resource, or cache, of detailed tutorials, knowledge, and in some cases freely usable assets, which you can use as weaponry in the never-ending battle against the industry Goliaths.

A search on YouTube and Google showed some interesting implementations on various platforms (Flash and Java), but I couldn’t find anything related to Corona SDK or Lua that I could dissect, learn from and implement myself.

So, I decided to have a go at creating the buoyancy myself. After all, this best way to learn is by diving in (no pun intended) and doing it yourself.

The maths may not be perfect, but I think that the effect looks good and, more importantly, pretty realistic.

In this example, I’ve added a ‘Settings’ section that allows simple changing of:

- Number Of Boxes

- Size Of Boxes

- Liquid Density

The liquid density allows the user to control how viscous the liquid is. The default setting of 1.0 simulates water, and the higher the number, the more viscous the fluid becomes. A setting of 2.5 here simulates something similar to oil etc.

In a future update, I will be modularising the code to make it more flexible, and support various display objects etc, and I’ll also be tightening up the physics calculations, but  hopefully it’s something useful that you may be able to use in your own projects.