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 — sega graphics

      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.

      Map Formats and Importing Levels for Genesis

      Map Formats and Importing Levels for Genesis
      There are a ton of to be taken into account when picking level formats for a game. For example, designers need to consider what information is needed, how it is accessed, and how much space budget there is for it.

      Read more

      Indexed Colors for Retro Backgrounds

      Indexed Colors for Retro Backgrounds
      A time-saving trick for making Sega Genesis background graphics.

      Read more

      Sega Genesis/Mega Drive VDP Graphics Guide v1.2a (03/14/17)

      Sega Genesis/Mega Drive VDP Graphics Guide v1.2a (03/14/17)

      Mega Cat Studios

       

      OVERVIEW OF VDP CONCEPTS

      • VDP

        • "Video Display Processor"

        • Video controller chip that handles the Genesis' tile graphics, scroll planes, and sprites. Not actually a processor

      • VRAM

        • "Video RAM"

          • RAM used by the VDP

          • Holds tiles (8x8 px images)

      • Two main machine types

        • NTSC machines

          • "Sega Genesis", 60Hz machines, primarily found in the US

          • Resolutions

            • H40 mode - 320x224 px (40x28 tiles). More common resolution mode

            • H32 mode - 256x224 px (32x28 tiles). Less common resolution mode

          • Mega Cat games are NTSC releases, so use these resolutions!

        • PAL machines

          • "Sega Mega Drive", 50Hz machines, everywhere else

          • Resolution

            • H40 mode - 320x240 px (40x30 tiles). More common resolution mode

            • H 32 mode - 256x240 (32x30 tiles). Less common resolution mode

      NTSC Model 2 Sega Genesis

      PAL Model 2 Mega Drive
      (European)

      3 graphics planes

        • 2 scroll planes
          • Plane B - Background plane
            • Displays tile graphics via tilemaps
          • Plane A - Foreground plane
            • Displays tile graphics via tilemaps

            • Window subplane - Subplane for Plane A, with tile graphics that does not scroll with rest of plane
          • Each row of tiles is rendered column-by-column
          • Tiles on each plane can have priority: low or high.

      Tiles for a sprite rendered in normal format (4x4 tiles)

          • 1 sprite plane

            • Draws sprite tile graphics

            • Internally, sprites are rendered in reverse order; i.e., each column of tiles is rendered by rows

            • Sprites are positioned in a virtual 512x512 px space, with coordinate (128,128) being the top left corner of the TV display.

            • Genesis can display up to 80 hardware sprites on screen at once

            • Genesis can display ~20 sprites on the same scanline before sprite overflow issues occur and sprites are not displayed

            • For hardware sprites, sprite sizes are limited in size to (w x h) sizes, where w is width, and h is height, where each dimension is 1-4 tiles.

            • Sprites larger than hardware sprite sizes can be obtained by using multiple sprites

            • Like with planes, the tiles for sprites can have a low or high priority. Low priority sprites are displayed behind high priority tiles in other layers. (It's a little more complicated than this, but this is the basic concept in a nutshell)

      Tiles for a sprite internally rendered in sprite format (transposed, 4x4 tiles)

      Visualization of priority of plane layers

      Source: Genesis Software Manual

       

        • VDP CRAM ("Color RAM")

          • 4 palette lines, each with 16 color entries

          • Each color entry has a color depth of 4bpp (4 bits per pixel)

          • 1st color entry is the transparent color for tile art

          • Palette lines can be rendered to use slightly lighter or darker colors by toggling highlight or shadow modes, respectively

      BACKGROUNDS

      There are 2 tilemap planes available for use on the Sega Genesis: a background plane ("Plane B") and a foreground plane ("Plane A"). Depending on the machine type (NTSC or PAL) and the video mode used (H40 or H32 mode), a full-screen tilemap will take up either a width of 32 or 40 tiles by a height of 28 or 30 tiles. Each tile consists of an 8x8 px image, with each pixel corresponding to a color entry index (0-15). The window plane is technically a subplane for Plane A; its graphics will not be scrolled with the rest of Plane A. The planes can be used in many different ways, such as fullscreen foreground and background layers, or for a technique many Sega Genesis games are famous for,parallax scrolling. By scrolling certain rows of tiles on the planes at different rates, an illusion of depth is created. Tiles in the different planar tilemaps can have a priority setting: either low or high. This setting will determine if sprites (which also can have a low or high priority setting) are displayed below or above the tile.

       


      VSRAM (Video Scroll RAM)

      Layers Plane A and Plane B can have scroll plane tilemaps of sizes (w x h), where w is width in tiles, and h is height in tiles, and where each dimension can only be of a size of 32, 64, or 128 tiles. These scroll planes are "scrolled into/out" of the active display resolution (size determined by machine types and H32/H40 mode). Scroll planes of sizes 128x64/64x128 & 128x128 are invalid due. By default, the sections of VRAM at default VRAM address 0xC000 and 0xE000 are displayed as "garbage tiles", but actually each pixel of those "garbage tiles" compactly encodes the VSRAM tilemap. The user should never write real tiles to these "garbage tiles" or weird graphical bugs/crashes, slow down, or garbage tiles will appear in the scroll planes. Planes can use 1 of 3 different, scroll modes: by scanline, by tile, or block (a section of 2x2 tile). Each plane can be scrolled horizontal, vertically, or both.

      COLOR

      Mastering the Genesis’ color restrictions is probably the best thing you can do to get the most out of your graphics! Tiles can only make use of 1 of 4 palette lines at a time. Each palette line has 16 color entries. The 1st color entry is reserved for the transparent color, which is recommended to be a solid purple of color (255,0,255) (RGB). You may want to allocate 1 or 2 palettes to stay consistent throughout the game, for a particular usage. For example, palette line #1 could be used for your player character, while palette line #2 could be used for UI elements. Enemies, backgrounds, and other changing elements through the game can make good use of different palettes.

        To get the most out of the color in this piece, two palette lines were used; one for each tilemap plane layer. The first two images are each layer (Plane B and Plane A, respectively) shown separately, while the third image is the final fullscreen image using both planes combined. As each tile can only use the indexed colors from one palette line at a time, taking advantage of a dual-plane image setup like this allows many colors in tight spaces that only a single plane image wouldn’t allow enough colors for.

        Two common color palette techniques are palette cycling and raster effects. By changing the color of particular entries in individual palette lines in-game every few frames, all of the tiles utilizing that particular palette line and color index setting will update to the new color. This is used for effects such as waterfalls, pulsating lights, etc.

        Sample palette cycle effect for the flashing Beserk bars in Zombie Football League

        Raster effects are changing all or some of the palette line's colors after a certain scanline. Performing this technique is beyond the scope of this document, but basically is swapping out all or part of entire CRAM's colors after the electron beam of the TV is past a certain horizontal scanline. This is useful for techniques such as applying a different palette for objects that are underwater and is used for underwater colors in Labyrinth Zone for Sonic the Hedgehog.


        SPRITES


        The base idle position sprite for Ashley from Coffee Crisis

        Sprites for the Sega Genesis are defined as images with a size of (w x h), where w is the width in tiles, and h is the height in tiles, where each dimension can range from 1-4 tiles. Each sprite can use only one palette line at a time. Hardware sprites can have a max size of 4x4 tiles. The Sega Genesis can handle up to 80 sprites on screen, 20 sprites per scanline, though it’s worth staying under this limit to avoid slowdown. To overcome the hardware sprite limit, many games utilize multiple sprites together for one character/object to accommodate larger sizes. A classic pixel art principle is to keep your graphics at a resolution large enough to allow suitable detail and clarity, but small enough to easily animate. All Sega Genesis tile art should always be divisible by 8 pixels, to align with tile sizes! Sprites can be flipped horizontally ("hflip'd") and/or vertically ("vflip'd"), as well as have either a low or high priority flag set. This priority setting determines whether the sprite will be displayed above or below tiles in the other planes (which also have a low or high priority setting). Hardware sprites can also have a "link" value; each sprite must have its own, unique link value. Among other effects, sprites with lower link values are drawn above sprites with higher link values.

         

        ANIMATION


        A running armoured Minotaur football player, from Zombie Football League

        In most games, the graphics will be animated, not just static sprites. By changing frames for sprites over time, the illusion of movement can be achieved and is used to portray walking, attacking, getting hit, etc. Different games deserve different styles of animation, and there are many specific animation tutorials worth checking out online. For the Sega Genesis specifically, be mindful about the number of sprites and tiles each animation takes up, and be sure to not go overboard with the number of sprites in each animation, especially if it will cause game slowdown. Sprite animation is often a battle between keeping a low individual frame and tile count and an appealing motion; this especially applies to animation on the Sega Genesis too. Focus on creating clear, readable keyframes so that the action in your animation is apparent, and take advantage of holding certain frames for different time durations.

        A common animation technique used is commonly called "Dynamic Pattern Load Cues" (DPLC) among the Sonic the Hedgehog ROM hacking scene. This is the term coined for dynamically uploading the tiles for sprite frames into VRAM on-the-fly, rather than storing all of the tiles for all sprites frames into VRAM all at once. Many times, for detailed sprites (such as the player sprites), the number of tiles utilized for all of the sprite frames will take up too many VRAM tiles. By uploading only the tiles you need for the particular sprite frame being rendered, you conserve your limited VRAM memory to be used for other tile graphics. Unfortunately, the tiles used for DPLC will need to be uncompressed in ROM for the uploading to VRAM to be quick enough to not cause game slowdown. (Decompressing compressed art has CPU overhead and takes away too many CPU cycles.) The functions in SGDK's sprite engine (in header file <sprite_eng.h>) generally utilize DPLC techniques to cut down on wasted tiles.


        RECOMMENDED DEBUGGING AND ART TOOLS
        Finding good software for creating retro graphics, quantizing pixel art into tiles, and reducing the color count to 4bpp can be difficult. Below is a list of the recommended art software to deal with retro graphics, and specialized emulators that allow the user to look at VRAM contents and planes

        Art software:

        • RetroGraphicsToolkit

        • Irfanview

          • Generic image viewer/editor, with plugins and very large support for many image file types

          • Can edit, export, and import palettes, as well as increase/decrease the color count of images, and view color count. Useful for preparing art image files for usage with SGDK's rescomp

          • FOSS software

          • Has PNG plugin in order to change color depth while preserving palette order

          • Info links

        • PCXpal

          • Useful software that can convert between several different palette formats.

          • Useful for converting to/from Megadrive .bin palettes and Irfanview's JASC palette format

          • Import formats

            • BMP,GIF,PCX images

            • GGD, GS*, MSD Genesis emulator savestates

            • Jasc, Megadrive, MS RIFF, Tile Layer Pro palette files

          • Export formats

            • Jasc, Megadrive, and Tile Layer Pro palettes

          • Info links

        Recommended specialty emulators for VDP debugging

        COMMERCIAL SEGA GENESIS GAMES TO REFERENCE


        There are plenty of awesome-looking Sega Genesis games to reference for various techniques and special effects. Such games include:

        • Streets of Rage series

        • The Sonic the Hedgehog series

          • Water palette raster effects

          • Sprite/tile priority (esp loops and dual-layer chunk system in Sonic 2 & Sonic 3/Knuckles)

          • High performance, fast, highly-polished game engine

          • Sprite DPLC

          • Great level design and art styles (esp. Sonic 3/Knuckles)

          • Palette cycling effects

          • Parallax effects

        • The Adventures of Batman and Robin

          • Tons of fancy graphical effects

        • Castlevania Bloodlines

        • Aladdin

        • Earthworm Jim series

          • Smooth animation

        • The Phantasy Star series

        • Red Zone

          • 1-bit, smooth, B&W video in the intro

          • Fake sprite and tilemap SW rotation!

          • Isometric/Top-down art style

        • Panorama Cottton (Jap), Street Racer

          • SNES Mode 7-like graphics, very complex line scrolling and graphical effects

        • Hard Drivin' and Race Drivin'

          • 3D, SW-rendered polygon graphics

        • Zero Tolerance and Beyond Zero Tolerance (unreleased)

          • DOOM-like SW raycaster

        • Toy Story

          • Palette raster effects to break the CRAM color limit for static cutscene images

          • DOOM-like raycaster for 1st-person level

          • Parallax effects for level geometry in 1st stage with Woody

        • Star Cruiser (Jap)

          • 3D, SW-rendered polygon graphics

        • Contra: Hard Corps

          • Giant Miniboss robot in the first stage is a tilemap with fake tilemap/sprite rotation

        • The massive homebrew RPG is known as Pier Solar

          • Great art

          • Worked on by a team of Genesis fans, gurus, and homebrew developers for several years

          • Massive 64Mb cartridge

        Take note of how different games take advantage of the Genesis' hardware restrictions, and how some games push the hardware to the limits. Streets of Rage and Batman excel with gritty urban locations. The Sonic games have bright, contrasting colors that make it easy to perceive Sonic’s surroundings despite the fast speed. Aladdin and Earthworm Jim have fluid, fun animations that emphasize the characters.

        REFERENCES/FOR FURTHER READING

         

        Thanks for reading! If you want more, you can read our NES graphics guide here, or check out our SNES graphics guide here!