A LONG History of Particles and Lighting in Games

Guys, SUPER WARNING: This is likely to be one of the most GIF-heavy posts you’ve ever seen, and it’s completely necessary.
Note: Not every picture is a .gif, so don’t sit there for a long time staring at a picture waiting, for it to move XD.

In order for me to delve into the history of particle effects and lighting in games, I have to go way, way back. Bring on one hell of a history lesson.

First games to define the era of video gaming itself, whew. Pong, Computer Space, Space Race. These were the first few games that started it all. Now as you can see, there isn’t much to say here except that the creators did what they could with what they had. All the games were simply white sprites on a black background, no lighting effects, no really defining particles (Other than the space background, but I don’t really count that as a use of particles here :P).

Pongcomputerspacespacerace

From here on, colour is used. Gun Fight and Tetris were made, which didn’t really stray too far from the original games, but they had yellow, which was nice. Space Invaders, Pac-Man, Frogger, and Donkey Kong came next (not in that order, mind you), and introduced the first interesting particle effects yet to be seen in games. Things such as the space ships exploding in Space Invaders, and the barrels smashing, and flame flickering in Donkey Kong, to the lilypads/logs/character, etc. in Frogger dropping beneath water were really visually unique additions to the gaming industry. These were achieved through simple 8/16 bit sprite animations that would play when necessary. There was still no visible lighting attempts here, as everything had flat colours that would be easy to see on an arcade system.

hqdefault (1)Tetris-VeryFirstVersionsicolorspaceinvadersPac-man Frogger_game_arcade Donkey_Kong_Gameplay

This next era is where games started to expand on the original arcade system look. By this point, NES and Atari 2600 were good competitors in the market, pushing game developers to up their skills on the arcade side to keep up. I, Robot looks like a breakthrough compared to the past games I talked about, combining impressive 3D aspects with coloured shadows, multi-coloured particle effects and just an overall visually appealing game.

I,_Robot_(arcade_game)
The next game, Dragon’s Lair was the first game to use cel-animation instead of computer generated graphics, which confused a lot of platers due to the lack of prompts and instruction(Check the video to see what I mean, I honestly felt like I was just watching a short film, not gameplay).

This is one of the first uses of a proper background in games, with a drawn-in background to give more of a feel of the environment the player is in. It really draws the player in to the game.

gaming-dragons-lair-screenshot-01 https://youtu.be/i6em4GRiRY0

Bubble Bobble was probably one of the last black background-basic colours arcade game that became really popular before the arcade revolution. The creators implemented some lighting techniques on the objects/characters to make them appear ‘shiny’, as well as some darker shading to accentuate that lighting direction further. These were just directly painted onto the sprites themselves, not difficult.

Bubble-Bobble

This is where developers really started stepping up their game (hehehe). They started using real images for backgrounds, started implementing the use of foreground and background to make the games stand out more. They also started to use a lot more particle effects, such as flames, blood, flashing life bars/glowing attacks, bullets, explosions really effectively. It’s also clear that they spent much more time thinking about lighting on the characters here. More thought has been put into the shadow texturing on character models/sprites, with some even having their own accompanying shadows, which in that time would have been quite hard to achieve/process.

Killer_Instinct_gameplayStemania4_Alpha4FatalityMslug103

In older games (Arcade, NES, Atari, etc.) effects such as clouds were generally just textured onto the background of the level, which was then looped continuously in the one direction, dependent on the player’s speed at running through the game. All textures were quite basic, with pixelated shapes being used most of the time.

frogatto-cloud-example cloudarcangel-super-mario-clouds

As the industry progressed, flashier particle effects were introduced to games, with a lot more going on during each particle-action. Explosions were longer than 5 frames, different colours meant different kinds of attacks, and gamers generally just had fun trying to learn new things, seeing what excited their customers most visually.

shrapnel_exampleparticles2particlesimage005d7aac5ecec4ebe0da4ab3c8d5acee3b8

This next heap of images is going to be a general timeline of the ways particles and lighting were used to effectively create an environment and mood for the games themselves.

Older GBA games used lighting in different ways to convey their level’s mood. In the first image, the light direction is assumed to be coming from the player’s top view, so all moving parts are flat-coloured. This meant that lighting didn’t have to be processed, and could just be textured on to the background.
In the next gif, we have the same idea, except that everything but Link has been textured with a light source in mind. This was also to cut down on processing costs/animation time, because it would be easy to texture certain enemies that would only appear in certain environments (such as this red, fiery creature, in a seemingly warm, hot underground temple), as opposed to texturing Link with different environmental lighting in every setting he travels to.

tumblr_ner34xH4Ld1saxnfeo7_250tumblr_ner34xH4Ld1saxnfeo2_250

Here, the same rules apply, but with better graphics and improved technology it is possible to create a more aesthetically appealing scene in the game. The background looks more realistic with its shading, and even Link has some colour variation on his body whenever he moves. There are slight textured shadows visible. The use of particle effects here was also quite amazing.

tumblr_nlzb4bCPOP1szbr1yo1_250

Mario incorporates the same ideas, slight textured shadows on the characters themselves, and an effective use of particles that start to mimic real-life fire effects.

tumblr_mcxw5ylAns1rhjm37o1_500

Continuing with the GBA theme, here are some more examples, in this order: LoZ A Link to the Past, Harvest Moon: Friends of Mineral Town, Pokemon Gold. All are using textured sprites doe their particle effects, with some more advanced than others which is simply a case of the look they were going for with their particular games. Each game has a great use of colour and lighting to give off the feel of each level.

tumblr_mhrx8c8ska1reats2o1_500tumblr_ner34xH4Ld1saxnfeo3_400tumblr_n6chysQBzz1tb5n9xo1_500tumblr_mg6d4kCEU61qh0ocho1_500

3D TIME!

Spyro, of course. I chose Spyro because it still blended 2D sprite particles with an otherwise completely 3D game. The whirlwind teleporter used basic particl effects, the waterfalls had basic effects, and Sparx the dragonfly still just has the same old sparkles that have been seen in the old arcade games for years. Lighting-wise, by the looks of the game the animators probably used global illumination, and then did some light baking to get the bright atmosphere it has. Normal mapping was likely used for the buildings/spyro’s textures, and all other shadows/highlights would have simply been drawn onto the material itself.

Whirlwind SN_Artisans03 SN_Artisans02 01copy

Eskimo

The same rules apply to LoZ: Ocarina of Time, global illumination, basic particle effects, normal maps, and extra shadows drawn onto the materials.

tumblr_mpmlr8rynt1ssgtuio5_500tumblr_ner34xH4Ld1saxnfeo4_500

Final fantasy also used the same methods, however their use of particle effects is drastically different here. Instead of simply 16 bit sprite particle, they’ve gone beyond that, creating 3D-looking effects that all seem really unique for each move. The characters all seemed to have had baked-in, front-facing lighting, which is evident in the way the particle effects don’t affect the colours of the characters at all reflection-wise. But these particles are what really makes the game visually appealing to me personally.

FFVII_Super_Nova FFVII_Limit_Break_Cloud_Omnislash FFVII_Limit_Break_Cloud_Meteorain FFVII_Limit_Break_Aeris_Healingwind FFVII_Final_Attacktumblr_mifj54Fvff1qfhd73o1_500

DOOM! This is where physics starting coming in to play. Ambient occlusion is present in the normal maps of the doors in that first gif, and the developers have clearly taken the time to consider lighting and how it will make everything look in the game. Now of course they’ve got very flat lighting, but the fact that they’ve put enough effort into the enemy models to ‘reflect’ light sources, in such an effective, appealing way through their textures is quite a nice change.

tumblr_mvnytxANuW1sla1zxo1_500tumblr_mksgk8sUho1rmu6i5o1_500

Runescape is a game known for it’s sub-par graphics, when compared to today’s greats. However, in 2009 developers announced the introduction of particle effects, which would be a big deal for such a huge, online game. They used 3D rendering to create the particles, which would allow them to run effectively in real-time.

Wardrobe Herblore_Emote Firemaking_Emote

They also mentioned implementing bloom lighting, which is a lighting technique clearly seen throughout LoZ: Wind Waker.Bloom lighting is a shader effect used to create highly illuminated, glow-type lighting. it normally results in flatter colours and a bright, cheerful atmosphere.

5cf4320049384cd4ae406368cae30143 ib1yGGDWPyMbJO tumblr_msruexCye61rufddbo3_400 tumblr_mss0axBIi11qbc2ylo1_250 tumblr_mtyr1tnmDr1qbc2ylo1_500 tumblr_n17oktuuID1rpxo9oo3_250

In today’s world of gaming, it’s all about what look you want to go for, and how to do it in the most minimalistic way possible. Some games are so incredibly big that most computers won’t be able to run it in the highest quality. However, it’s clear that modern video games still employ some of the old tactics I described, such as texture shading, ambient occlusion in the normal maps for more depth in the textures, and baking in the lighting for inanimate parts such as backgrounds or immoveable objects, to lower processing costs and ensure a faster, more immersive gameplay experience overall.

tumblr_ner34xH4Ld1saxnfeo10_r1_500 tumblr_mnhnuoBfJH1qfwde8o1_250tumblr_n6ypo25M3Y1r7oiino1_500tumblr_n6yrd6An6F1r7oiino1_500

With more advanced game engines, come more photo-realistic games. TES:Skyrim, released in 2011, was and still is a remarkably beautiful game to play. The scenery, the mood, the incredible vastness of it all, completely immerses you into the world. This game in Ultra Quality is truly inspirational for animators everywhere. They’ve used a range of all the techniques I’ve mentioned earlier, but have then improved on their lighting usage, their texturing/normals, their particles and all. Every area has a different mood, and there is almost no static lighting in any scene. All lights interact with moveable objects and characters, and this really brings a more life-like quality to the overall look.

tumblr_mr9zcbWr1x1rruop4o1_r1_500 tumblr_mthtafBtel1ro2yn3o2_500 tumblr_muis1yue8x1sa9uqco1_500 tumblr_mxicboSoML1rs4r2io1_500 tumblr_n97x7fIMXk1qljgf8o1_500 tumblr_nckpt02R4a1si9n7to1_500 tumblr_ncl0zm9Ss11si9n7to1_500 tumblr_ncqgh6mrmG1si9n7to1_500 tumblr_ne5r1wCmhb1sks57ro1_500 tumblr_nef0igLyE41sks57ro1_r2_500 tumblr_nll3seEZkj1sks57ro1_500 tumblr_nll3seEZkj1sks57ro3_500

Another game that achieved these same results spectacularly is Tomb Raider, realeased in 2013. I’ve only just started playing this game recently, but even I’m amazed by the use of lighting in each scene to create such brilliant, awe-inspiring views. There is a hybrid of lighting techniques going on, between Forward Lighting and Deferred Lighting.

Forward Lighting:

For each object -> Find all lights affecting object; render all lighting and material
or
For each light-> for each object-> add lighting from single light to frame buffer

When rendering with this technique, light is calculated for each light source, and against each object it will affect.

Deferred Lighting:

A deferred lighting pipeline is typically made up of multiple intermediate storage buffers (G-buffer) that are later combined into one image as input textures and given to a lighting algorithm such as phong or diffuse.

Deferred lighting is essentially the ‘cheaper’ option, as once all the calculations have been made, the the scene geometry is only rendered once and that’s it.

Accumulation Buffer: This is a texture to which lighting information is added for each deferred light rendered. The final accumulation buffer represents the lighting information for the frame.

The Senior Rendering Engineer stated that, ‘As a result we ended up moving forward with a hybrid solution. Opaque objects would use deferred lighting through an accumulation buffer, and forward lighting would be implemented when dealing with translucent objects or complex materials such as hair or water. ‘

It’s clear to see that their hybrid method worked well, along with the use of Shadowing, Normal Mapping, different materials on different objects and an advanced use of specular highlighting. The game is beautiful, and allows the player to feel almost as if they’re actually there.

Their use of particle effects has also been mastered here. Every area of the game has created a mood through the use of fire, water, dust, smoke, debris, snow, etc. Everything works well, and nothing is over the top or overused in any way. I truly find this game to be on of the most beautiful I’ve ever played.

lara lara1 lara2 lara3 lara4 lara5 lara6 lara7 lara8 lara9

I’m not too sure how informative this post was, and my 2am brain-dead mind probably left out a lot of points I intended to include, but after this many images I think I need to stop. Hahaha 🙂

Happy Easter everyone!

———————————————————————-
References:

@stylehatch, S. (2015). [GDC WEEK] Casting a New Light on a Familiar Face:… | Tomb Raider Blog.Tomb Raider Blog. Retrieved 3 April 2015, from http://tombraider.tumblr.com/post/46469141391/gdc-week-casting-a-new-light-on-a-familiar-face

@stylehatch, S. (2015). [GDC WEEK] Casting a New Light on a Familiar Face:… | Tomb Raider Blog.Tomb Raider Blog. Retrieved 3 April 2015, from http://tombraider.tumblr.com/post/46469141391/gdc-week-casting-a-new-light-on-a-familiar-face

DoomWiki.org,. (2015). Fake contrast. Retrieved 3 April 2015, from http://doomwiki.org/wiki/Fake_contrast

Gamestudies.org,. (2007). Game Studies – Dynamic Lighting for Tension in Games. Retrieved 3 April 2015, from http://gamestudies.org/0701/articles/elnasr_niedenthal_knez_almeida_zupko

Langer, M., & Bülthoff, H. (2000). Depth discrimination from shading under diffuse lighting.Perception, 29(6), 649-660. doi:10.1068/p3060

Michaeldashow.com,. (2015). Texture Painting – Michael Dashow. Retrieved 3 April 2015, from http://www.michaeldashow.com/tips_texturepainting.html

Papadopoulos, J. (2013). Official Call of Duty: Ghosts Trailer Reveals A ‘Fake’ Lighting System | DSOGaming | The Dark Side Of Gaming. Dsogaming.com. Retrieved 3 April 2015, from http://www.dsogaming.com/news/official-call-of-duty-ghosts-trailer-reveals-a-fake-lighting-system/#more-49894

Poopinmymouth.com,. (2015). Ben Mathis. Retrieved 3 April 2015, from http://www.poopinmymouth.com/tutorial/tex_theory.htm

Presspauseradio.com,. (2015). Press Pause Radio – Not Your Everyday Podcast – QCF: Hyrule Warriors. Retrieved 3 April 2015, from http://www.presspauseradio.com/presspauseradio/2014/10/7/qcf-hyrule-warriors.html

Sun and Black Cat – Computer Grafics & more,. (2015). Lighting models: hemisphere lighting, image-based lighting, spherical harmonics. Retrieved 3 April 2015, from http://sunandblackcat.com/tipFullView.php?l=eng&topicid=31

Tehdaza Productions,. (2012). Deferred vs Forward Lighting. Retrieved 3 April 2015, from https://tehdaza.wordpress.com/2012/01/29/deferred-vs-forward-lighting/

Wikipedia,. (2015). Image-based lighting. Retrieved 3 April 2015, from http://en.wikipedia.org/wiki/Image-based_lighting

Wikipedia,. (2015). Radiosity (computer graphics). Retrieved 3 April 2015, from http://en.wikipedia.org/wiki/Radiosity_(computer_graphics)

Wikipedia,. (2015). Timeline of arcade video game history. Retrieved 3 April 2015, from http://en.wikipedia.org/wiki/Timeline_of_arcade_video_game_history

Wikipedia,. (2015). Timeline of arcade video game history. Retrieved 3 April 2015, from http://en.wikipedia.org/wiki/Timeline_of_arcade_video_game_history

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s