FREE US SHIPPING ON ORDERS $175+
0 Cart
Added to Cart
    You have items in your cart
    You have 1 item in your cart
      Total

      Retro Development — pixel art

      Optimizing 16Bit Pixel Art for Classic Consoles

      Optimizing 16Bit Pixel Art for Classic Consoles
      In order to create console-accurate pixel art, there are many restrictions that an artist has to follow in order to make their work functional. We've talked about 8bit systems in the past but today we'd like to enter the 16bit era, and teach you how to create gorgeous art on these beloved consoles.

      Read more

      The Merits of the Pixel

      The Merits of the Pixel

      Despite its age, pixel graphics show no signs of dying. In an age of planned obsolescence and a never ending-arms race in graphical rendering, pixel art has aged impeccably—with no signs of irrelevancy on the horizon.

      Pixel art began simply as the visual representation of a game using incredibly low-resolution technology. Arguably, The Oregon Trail (1971) was among the first game to feature pixelated graphics, even if it featured vague, geological features set against an ominous black void. Titles such as Super Mario Bros (1985) was comprised of blocky, basic graphics because it had no other choice. AS games evolved, so too did the graphics; the Bit Wars turned into a competition to have the more powerful graphical processor, whether that be 16-bit, 32-bit, or the lofty 64-bit.

      By the tail end of the century, pixel graphics began to be superseded by more ambitious 3-dimensional graphics, pioneered by Half-Life (1998) and The Sims (1999). With the new millennia came a slew of 3D first-person-shooters, like Counter Strike (2000), Halo (2001), and Splinter Cell (2002), as well as 3D role-playing games like Neverwinter Nights (2002) and EverQuest (2000).

      Suffice to say, the 2000s were an age defined by incredible progress made for 3D graphics. The visuals of Halo and Halo 3 (2007), or Grand Theft Auto (1997) and Grand Theft Auto IV (2008) are incomparable. A new generation of consoles—the Xbox 360, PlayStation 3, and the Nintendo Wii—pushed the limits of graphical processing, and raised the ceilings for developers. The Bit Wars hadn’t ended; they only evolved.

      Now devoted gamers work to max out the graphical processing on their own personal computers. The race for graphical realism continues in franchises like Call of Duty, Battlefield, and Far Cry. Even games without realistic graphics like Overwatch (2016) are constantly being pushed by PC players to play at the highest quality and FPS (frames per second). However, there has been a backlash; not everyone wants hyper-realism or cares about stunning performance.

      Just as the Romantics of the 18th century rebelled against the Industrial Revolution in favor of a simpler, more nostalgic aesthetic, so too are game developers looking to the pixel graphics of yore, a medium rife with potential and nostalgic value. They would come to define a part of the 2010s as indie developers began to penetrate the market with retro-inspired titles.

      Some of the largest titles from the 2010s proved with their pixelated visuals that graphics aren’t the only thing that has improved in gaming: narrative, game feel, and the sheer scale of games have also been improved, with titles like Undertale (2015), Hotline Miami (2012), and Minecraft (2009) exemplifying these improvements respectively, while still paying homage to the pixel. Even in 2018, games like the rogue-like Wizard of Legend combine quality game feel, solid mechanics, and impressive visuals with pixel graphics.

       

       

       

      Pixel art has begun to reach beyond gaming -- it has become an artistic medium in and of itself. It is technically, yet tastefully, dated style. The works of Youth Toyoi, known simply as “1041uuu”, an illustrator from Japan, do a stunning job at embodying this. Much of his arts are gifs—living, breathing animations that loop endlessly. They’re hypnotic, with an incredible command of color. They seem to hold the past and the future in both hands, making the present—a Japanese cityscape, a distant Mt. Fuji, or a doe by a riverbank—that much richer and engulfing.

      A large contributor to pixel art’s modern success has been its accessibility. It is an incredibly approachable medium, with applications like Piskel, Pixlr, and Gimp providing novices with easy-to-understand experiences in learning how to illustrate and animate using pixel art. Even better, these applications are also completely free. This means the general public has free and easy access to a medium that has an incredibly low skill floor and an incredibly high skill ceiling. It lends itself to absolute novices who can’t draw a stick figure to save their lives, yet still, allow for creators like Youth Toyoi to create emotionally evocative pieces.

      Game engines have also become increasingly accessible to the public, which means that these home-brewed pixel graphics have a place to be implemented. The Godot Engine and GameMaker Studios have native pixel art editors, while Godot, Unity, and Unreal are engines that are free for anyone to use and try out.

      Pixel art and graphics aren’t going anywhere; the pixel is the purest visual representation of video gaming, and as narrative, game feel, processing power, mechanics, and scope continue to improve within gaming, the pixel aesthetic will remain timeless.

      Pushing the Sega Genesis to Its Limits

      Pushing the Sega Genesis to Its Limits

      All of this information is getting pulled from the following series of videos. If you are planning on doing anything along these lines, it is a great idea to not only read this document but also watch the videos that are being referenced. They break down how to do these effects piece by piece in order to achieve these impressive effects: https://www.youtube.com/playlist?list=PLi29TNPrdbwJLiB-VcWSSg-3iNTGJnn_L

       

      2-Color 60FPS Full Screen Animations

      https://youtu.be/c-aQvP7CUAI

       

      Doing a full-screen animation, even at two colors, at 60 frames per second would obviously be way too large to fit on a Genesis game. Even with compression, it would end up being larger than the max size. In order to get around that, the creators of Sonic 3D Blast took a very interesting approach to achieve the effect.

      genesis, sega, indie game design, video game dev, level design, retro gaming, gamer

      This is a single frame pulled out of the animation. The way that they were able to create the fluid motion is by making the animation itself ¼ of the perceived amount of frames and then overlaying a handful of frames on top of each other with different palette indexes. They then set palette index0 to a dark color and then the appropriate indexes for the first “subframe” to a light color. Finally, all other indexes are set to the same color as index0. Then they simply cycled the palette between frame changes to animate all of the subframes to create the smooth animation. So while it looks like a smooth 60fps animation, it’s really a very choppy 15fps animation with a ton of palette cycling going on in it. What that means for an artist is that they have to set up each frame to have a series of frames overlaid on top of each other. Each of these subframes needs to be a unique color, as does any area where subframes overlap like in the above image.

       

      3 Dimensional Curvature

      https://youtu.be/z1mcLXEJTkA

       

      This is an interesting trick that makes use of horizontal scan line interrupts and a lot of math to create a 3 Dimensional perspective with a slight curvature to it. The background itself is composed of a tileable portion that is mirrored and then offset in a way to hide the seam where it is mirrored.

      genesis full screen animations, sega, game development, indie game design, retro gaming

      Those are the mirrored segments lined up to show that they are indeed mirrored, but when they are placed next to each other, you can see that the artist did it in a way that the mirroring would be hidden.

      genesis full screen animations, indie game dev, game design, video game development, retro gaming

      The way the perspective curve is achieved is entirely through using horizontal interrupts to remove select horizontal lines from rendering, and doing it in a curve in order to make it shrink the higher you go up the screen.

      sega genesis, level animations, how to design animations, indie gaming, retro game development, gaming

      The resulting combination will give you a full image that looks like this:

      indie game design, video game dev, full screen animations, sega genesis, retro gaming

      In motion with a vertical scroll, it gives off a pretty great sense of perspective. There are about a million different ways this concept can be used as well other than just perspective tricks. Using this method you should be able to actually squish and stretch entire background layers vertically for example.

       

      Full on FMVs in a Genesis game

      https://youtu.be/IehwV2K60r8

       

      The first thing that was done to save a little bit of space to make a fully rendered video actually fit into a full-featured game was the make the video slightly shorter than the native screen resolution, as well as only rendering it at 16 colors (as opposed to using the four available palettes). The video itself is played back at 15fps to further save space. Then finally they used RNC compression on the entire thing to shrink it down even further. The problem with RNC compression though is that it can’t process fast enough for a nearly full-screen 15pfs screen animation. This is where they yet again used horizontal scan-line interrupts.

      full screen animations in video games, sega genesis, retro game consoles, indie game dev, gaming development tips, how to design levels for sega

      This is what the video looks like in the game when you are playing it.

      sega genesis video game development, indie game design, fullscreen animations, retro gaming

      This is what the image that is being rendered actually is. They took the frames of the video and sliced a bunch of horizontal lines out of it to produce an extremely shortened version of the image. You’ll also notice all of the vertical lines running through the image. RNC compression handles vertical lines a little better than dithering patterns. Those lines will be dealt with shortly though.

      In order to make the image fill the screen, they used horizontal interrupts to duplicate each line of the image, stretching it back out to fill the screen up. That is how they went from the short image above to a nearly full-screen image in the final product. 

      In order to change the horizontal lines into a dithering pattern, they offset every other scanline by one pixel, creating the checkerboard pattern that you would expect. They went back and offset the odd scan-lines instead of the even ones and alternated between the two at a constant 60fps. Doing this took what was originally just a series of vertical lines and convincingly turned it into some extra colors. In the end, the entire 12.5 second FMV only ends up weighing roughly 660kb, which is only a small portion of the available 4MB of the total ROM.

       

       

      Organizing NES Graphics Banks

      Organizing NES Graphics Banks
      A guide to organizing banks of sprite and backgrounds tiles to optimize memory for the NES.

      Read more

      NES Background Art II: Teaching as a Pixel Sensei

      NES Background Art II: Teaching as a Pixel Sensei
      Making NES backgrounds for Almost Hero 2, a new retro game from Mega Cat Studios. Discusses NES art restrictions, NES palettes, and tricks for making NES art

      Read more