Emulator 101

iPhone Port pt 6 - Eye Candy

To go a step further, I'll add in some code to add some color. Some models of the Space Invaders arcade machine had stickers on the monitor to make the UFO red and part of the bottom area green.

I'll break the image up into 7 areas

1. Scores

2. UFO area (to be red)

3. Invaders area

4. Shields and player area (to be green)

5. Level number

6. Reserve base area (to be green)

7. Credit label

Since this program uses OpenGL ES 2, we have a shader and it is pretty easy to code up this overlay pattern. In the shader, I'll use the Texture Coordinate to locate the area of the screen of the current fragment. If I'm in one of the target areas, I'll modify the color to either red or green. Now my fragment shader looks like this:

   precision mediump float;    
   varying mediump vec2 vTexCoord;    
   uniform sampler2D tsampler;    

   void main()    
   {    
       vec4 modColor = vec4(1.0);    
       vec4 texColor;    
       //These are swapped because of the rotated game screen texture    
       float y = vTexCoord.x;    
       float x = vTexCoord.y;    
       texColor = texture2D(tsampler, vTexCoord);    
       if ((y > 0.8) && (y < 0.865))    
       {    
           modColor  = vec4(1.0, 0.0, 0.0, 1.0);  //red, diagram area 2    
       }    
       else if (y < 0.3)    
       {    
           if ((y > 0.06)   //area 4    
            || ((x > 0.08) && (x < 0.60))) //area 6    
               modColor  = vec4(0.0, 1.0, 0.0, 1.0);    
       }    

       gl_FragColor = modColor * texColor;    
   }    

I just fiddled with the y values in the shader until I got the coverage areas I wanted.

The math works like this. I define a modulation color in the top of the shader to be white which is (r,g,b,a) = (1.0,1.0,1.0,1.0). When I'm in the UFO area (area 2 on the picture), I make the modulation color red (1.0, 0.0, 0.0, 1.0), and similarly make the mod color for areas 4 and 6 green. The texture sample will return either white (all 1.0) or black (all 0.0). The last line of the shader multiplies the two colors. So when the texture is white, and I'm in the red area, the green and blue components get turned off by multiplying by 0.0.

My code with colorization added to ViewController.m is in the github project under iphonePart6-Color

Bonus Attract Mode

I found a background for the Space Invaders arcade machine that was made for the MAME emulator from aarongiles.com. I made another project that incorporates this texture as a background image.

To draw the game image over a background I made the following modifications to the OpenGL code:

1. Both textures are loaded and bound at the same time using multitexture. The game image is still bound to GL_TEXTURE0, and I bound the background to GL_TEXTURE1.

2. The fragment shader has an if statement that controls which part of the fragment shader will execute. I control which part executes with a uniform. One pass draws the background image, another pass draws and colorizes the game image.

3. I have enabled blending. To blend the game over the background, I set the alpha of the game image. Where the game wants to draw pixels, the fragment shader sets the alpha to 0.8. Where the game won't draw (the game image is black there), I set the alpha to 0.1. You can still see the black faded faintly over the background image, but I think that looks cool.

← Prev: iphone-port-pt-5---sound   Next: introduction-to-chip-8 →

Post questions or comments on Twitter @realemulator101, or if you find issues in the code, file them on the github repository.