History of Pixel Art and 3D games

In the beginning of gaming, there was no such thing as detail or graphics, there were only basic colored pixels.The two main key components of our graphical evolution started in pixels and is progressing in the world of 3D. From the explosion of arcade gaming and home consoles, to the refinement of 3D visuals.Let's start with smallest component, the pixel. A pixel is the smallest point at which a digital image can be manipulated. A group of pixels arrange together in different colors to create a  larger picture. As the screen's resolution increases the pixel become smaller and smaller.

Early video game console worked with a very small screen resolution so our graphical limitations kept us from expressing ourselves visually, but luckily, over the years things have changed. We can see this in the visual constraints Shigeru Miyamoto, the creator of Mario, had to do in order for the console to support his character. He added a hat to avoid hair pixels and a mustache to avoid the mouth. All of this visual detail was constructed with the purpose of readability and gameplay, not any visual esthetics. There was also the downside that the programmers that created the character mostly did not have any art background.

Mario by Shigeru Miyamoto

Most people see these visuals as outdated, but recently people have realised the powerful possibilities that we now have using pixels because we don't have those technical constraints from the early digital years. Pixel art has completely changed from the 8-bit era played on the Nintendo, to your smart phone game. The reason mainly being that TV sets back then were extremely blurry and so if you have a small character made out of boxes on a low resolution TV you get a blurry collection of boxes with unidentifiable detail when as nowadays you can easily distinguish each box and see the true beauty of modern day pixel art.

A blurry mario on a low resolution screen

A similar type of Mario with more pixels in the pixels

Some of the beautiful remastered pixel art from Super Mario

Terraria is new and very successful open world game made entirely out of pixel art. The technique used is not that old school basic pixel art we were used to but it has a modern touch of detail to it to symbolise the graphical capabilities of today's generation. The game is mainly a huge sandbox in which a player can dig deep to find material and make stuff with different tools and with the materials gathered. You battle monsters from all across the land and travel beautiful environments all using the same pixel style. I personally prefer this type of pixel art with this level of detail and still able to look retro. This is what pixel art has evolved in the modern day of cool and exciting graphics.

Detailed Pixel art from the game ''Terraria''

Evolution of 3D

On the other spectrum we have the world of 3D. Nowadays 3D is the mainstream ideal for gaming.

Back in 1966 sega created and electro

mechanical game called periscope. What separated Periscope from other games at the time was the ability to immerse a gamer in a different viewing mode. Players would put their head up to mechanical periscope that mimics the feeling of being an actual submariner.

In 1978 from publisher Exidy, came a game called Starfire. Starfire was pseudo 3D game was simply a shooter which invited you into a cockpit of a starship to shoot down incoming drones.

In 1987 a puzzle video game developed by Major Developments called Driller was released. This had the very first 3D shaded models with its very own first ever 3D engine. The player had to stick to the shadows to solve a series of puzzles.

Now the problem here was that the world created in this 3D environment had still a long way to go and detail was slowly progressing.

1996 3Dx voodoo one graphic card

As the 3D game industry improved it started to focus on the computer's power of rendering 3D polygons. After time of evaluation the industry quickly realised that throwing more CPU into the hardware wasn't going to cut it so a dedicated graphics card was introduced. At first people didn't see the need of this but in the end it became the standard high-end mode of playing. With a system that offered a higher resolution and additional effects it was worth it. Back then, the core functions of a graphic card were simply to work out items in the game where they should and how they should be lit. It still had a long way to go until high-end gaming could be properly played on a PC.

Nowadays 3D has been evolving into how realistic and object can get. Realistic characters and facial animations using facial recognition and motion capture is becoming popular. Shaders have improved dramatically, rendering individual pixels, vertices and pieces of geometry to add detail and effects.

Facial motion capture L.A Noire

Games are advancing but with that comes allot of cost. A big game like GTA V has thousands of assets that need to be created. Some companies use shortcuts to generate a landscape or forest in a hurry but in general if the developer wants something, he has to make it himself costing money and time. Some of the big changes that are slowly progressing nowadays are 3D games, using virtual reality head mounted display. This includes the Oculus Rift. This device lets you wear the head mounted display and virtually feel like you are in the game. when you move your head in reality, you can actually move your head in the game. This is all prototype being tested, but at least we have a glimpse of what the future might look like.

Playing skyrim with the Oculus Rift

Comparison

Games have come a long way, utilising both art style and designs. Pixel art is commonly used in mobile application and indie games but can be found anywhere and not just only games but video game covers and art galleries. 3D games are also found everywhere and is the true future of high end gaming. When a game displays a high quality of 3D rendering with allot of detail it will truly show the capabilities of that console or PC. With technology rapidly advancing this is the way to truly show it. Pixel art and 3D can be used together in the same game. A game like ''crossy road'' and ''Minecraft'' uses both pixel art and 3D to make this wonderful  fusion of nostalgic gameplay. 

The combination of pixel art and 3D by Crossy road

An advantage that pixel art has over 3D is that once the system is able to produce all the different colors used, the only limitation left is the skill of the artist to produce the best product. When it comes to 3D, the artist will be limited by the technology of the individual. Good thing that technology is always advancing and the artist can truly express himself to the consumer. In my opinion pixel art is my favourite type of game art, I just love how retro certain games can feel and their detail can interesting to notice. On the other hand what I love about 3D is the expression of perspective, not only viewing something from the same angle but actually feeling immersed. Great FPS games wouldn't even exist without 3D capabilities so I feel that both styles have their cons and pros.

Impact on Society

Both have made a huge impact on society and how we view graphics in games. Pixel art has proven that it can come back to fashion because now technology has let it express itself completely. With artists bringing back retro creation like mario and making all kinds of merchandise to honor the past and even cosplay the present. Websites like 'Redbubble' sell merchandise that bring back the old days with pixel . They sell everything from T-shirts, mugs, pillows and even posters. A new trend using sticky notes and pixel art which sticks sticky notes on a canvas or wall and with different colors using the same concepts of pixel drawing, you can create an artwork.

Pixel related merchandise

Sticky note artwork of spider-man on a window

3D has impacted the way we see things. We now can see things a new perspective and character that before felt 2D and in a box moving images, can now be felt close to reality. Figurines being inspired that give the sense of the 3D perspective. Even 3D printing is becoming popular, delivering you some that you imagine in your mind and suddenly being able to touch it with your own hand. 'MyFaceOnAFigure' is a website that focuses on 3D printing your face onto a figurine super hero . This is a new kind of connectivity that 3D is implementing in our lives. 3D will always evolve into trying to fuse our reality with the virtual one.

Custom made figurines of people

Creating an asset : Pixel Style

This is what we are going to be creating

I am going to be creating a pixel art style Pokeball from Pokemon using Photoshop CS6.

• Start by opening photoshop and go to File > New and create a new document, name it Pokeball.

• Set the width to 20px, height to 20px and the rest you can ignore.

• Now by holding down the Z key and clicking on the white background we can zoom in to have a better view.

• Now let's unlock the background layer on your layers tab on the right. Double click on the layer to unlock. Name the new unlocked layer BG.

Now that we can edit that layer we need to setup photoshop so that we can start applying some pixel art.

• First thing we have to is to change the from the brush to the pencil, and set the brush size to 1px. This can be done by clicking and holding on the brush icon to your left and select the pencil.

• After that, change the pixel size on your top left corner to 1px and set the hardness to 100%.

• Now you need to the same thing for the eraser. Go on the eraser icon on your left, select it and change the brush mode to pencil.

• Now change the eraser size to 1px and hardness to 100%, just like the pen.

Now we can set up our grid on the canvas so we can see which pixels we can paint on.

• You can do this by going to view > show > grid must be selected.

To check that this method has been applied correctly we need to check the grid lines. 

• Go to Edit > preferences > Guides Grids and slices.

Here we need to see that grid lines is set to 1px and subdivisions is set to 1px.

One more thing we need to is to adjust a setting so to not have photoshop blur out our edges, we want that hard pixel look. 

• Go to Edit > Preferences > General.

• Now change the image interpolation to nearest neighbour.

• Now that we have set our canvas with the grid we can start painting. Create a new layer and name it Pokeball.

• Select the pen tool with a black color and create the outline of the PokeBall.

TIP: Count the pixel block, start from the top and make your way down.

• Now change the color of your pen to red. Change RGB to (238, 21, 21).

• Fill in the red.

• Now select the black color again and fill the remaining black middle outline.

• Now change the color to grey. Change RGB to (230,230,230)

• And fill in the grey section.

• Finally fill in the white section with white.

Painting done.

Now if you want to use this as an asset in a game, these are some final things you can do.

• In the right side disable the BG layer pressing on the eye icon.

• Then go to Image > Trim

• Now select transparent pixels and click ok.

Now the image has been trimmed to the pixels drawn.

• Final thing you need to do is go to File > Save as > Png and you can use that asset in a game engine.

That is all you  need to draw some pixel art and import it to your game engine. You can do more on a sprite sheet if you want animate it and make it more fun.

 Creating an asset : 3D style

This is what we are going to be creating.

• Start by opening photoshop and go to File > New and create a new document, name it Pokeball.

• Set the width and height to 1000px and resolution to 150px.

• Now you need to unlock the background. Double click on the first layer and name it BG.

• Now go to File > open and search for an appropriate background. I chose one with some landscape and blue sky.

• Now create a new layer. Select all the layer by pressing CTRL + A select the white color .Now press Alt + Delete.

• Now that you have a white layer, create a new layer and select the rectangular marquee tool and do a red (238,21,21) rectangle cover half the white area. Select all the are by pressing CTRL + A , select the move too and press the align top edges. This will put the upper part of the red.

• Now you need a create a new layer and by selecting the marquee tool you need to make a black rectangle in the middle. When you do the this, select everything by pressing the CTRL + A and arrange the rectangle to be in the middle. Select the move tool and press the align vertical centres and align horizontal centres.

 This is what you should end up with.

• Now you need to a small black circle in the middle. Do this by creating a new layer, select the eliptical marquee tool, hold down the Shift + Alt and do a small circle. Then repeat the previous procedure to align in the middle.

• Now do another circle, but grey (235,235,235). The circle need to be smaller and aligned in the middle like before.

• And finally the last smaller circle which should be white.

• Select the black line and circles and scale them down a bit so they come looking nice in 3D. Do this by pressing CTRL + T.

• Now you need to select everything by holding down CTRL, all except the BG layer. Go to 3D > new mesh from layer > Mesh preset > sphere.

And you should end up with something like this.

Now all we have to do is find a suitable image with a shiny chrome look and apply it to the texture.

• Go to show all materials.

• Now load the texture you will use from the environments.

• Now you just need to arrange the shine and reflection to your likings.

And you should end up with something shinier like this.

• Now you can go to 3D > Render and render the image for use.

That is all for creating your own 3D rendered Pokeball.

Bibliography:
Thersa.org, (2014). 3D Printing and its Impact on Society - RSA. [online] Available at: https://www.thersa.org/discover/publications-and-articles/rsa-blogs/2014/01/3d-printing-and-its-impact-on-society/ [Accessed 13 May 2015].

Wayofthepixel.net, (2015). Why do we still use pixel art nowadays ?. [online] Available at: http://wayofthepixel.net/index.php?topic=16177.0 [Accessed 13 May 2015].

Thersa.org, (2014). 3D Printing and its Impact on Society - RSA. [online] Available at: https://www.thersa.org/discover/publications-and-articles/rsa-blogs/2014/01/3d-printing-and-its-impact-on-society/ [Accessed 13 May 2015].

Myfaceonafigure.com, (2015). MyFaceOnAFigure.com: Create an action figure of yourself!. [online] Available at: http://www.myfaceonafigure.com/ [Accessed 13 May 2015].

Wikipedia, (2015). Driller (video game). [online] Available at: http://en.wikipedia.org/wiki/Driller_%28video_game%29 [Accessed 13 May 2015].

YouTube, (2015). Pixel - A pixel art documentary. [online] Available at: https://www.youtube.com/watch?v=7mqAZ06dwKU [Accessed 13 May 2015].

Wikipedia, (2015). Pixel. [online] Available at: http://en.wikipedia.org/wiki/Pixel [Accessed 13 May 2015].

Anon, (2015). [online] Available at: http://www.foveon.com/files/ABriefHistoryofPixel2.pdf [Accessed 13 May 2015].

Wikipedia, (2015). Mario. [online] Available at: http://en.wikipedia.org/wiki/Mario [Accessed 13 May 2015].

Wikipedia, (2015). List of video game consoles. [online] Available at: http://en.wikipedia.org/wiki/List_of_video_game_consoles [Accessed 13 May 2015].

IGN, (2015). Terraria Review - IGN. [online] Available at: http://www.ign.com/articles/2011/05/25/terraria-review [Accessed 13 May 2015].

YouTube, (2015). Pixel Pioneers: A Brief History of Graphics, Part One. [online] Available at: https://www.youtube.com/watch?v=dzN2pgL0zeg [Accessed 13 May 2015].

games, T. (2010). The evolution of 3D games. [online] TechRadar. Available at: http://www.techradar.com/news/gaming/the-evolution-of-3d-games-700995 [Accessed 13 May 2015].