Skip to content

Tag: video game

Mortal Kombat Arcade Cabinet from Arcade1UP – Part 4: Sound and lights

Check out the all parts of the Mortal Kombat Arcade Cabinet from Arcade1UP serie:

Sound

The great ETA PRIME’s ‪Arcade1UP Raspberry Pi Install Tutorial – RetroPie in an Arcade1UP video tutorial uses an amplifier and speakers. That’s a great solution and probably what you need. As I said before a lot of the decisions I’ve made were based of things I already had around at home.

For instance, I had an Cyber Acoustics CA-3602FFP 2.1 Speaker Sound System with Subwoofer and Control Pod around without use after I upgraded some equipment100. I’m not going to disagree with anyone who says this is a total overkill for this project. This has a lot of power and a subwoofer. It greatly exceeds the sound needs for old arcades games. However, it was literally accumulating dust in a corner.

Cyber Acoustics CA-3602FFP 2.1 Speaker Sound System with Subwoofer and Control Pod

This thing also have this little control pod that is just perfect for this project. It controls the volume using a knob. I absolutely love control knobs. I could write a whole post about knobs. It has a round blue led which goes well with the whole arcade theme. On top of all that, the control pod also has a control for bass, an on/off switch, an auxiliary input and a phone output.

Volume control

Because the wires fit in the gap between the panels no drilling was necessary. Inside the cabinet I just put the subwoofer an the two speakers. I used a double-sided mounting tape to put it in place.

The little blue circle light.

For the sound input I used the sound output from the control board. That is already converting the HDMI sound output. Another solution would be to plug it directly into the Raspberry PI and configure it to output the sound there instead of sending it via HDMI.

Control board to speakers

Lights

The last thing I added was just some LED strip lights in the back of the machine. It’s just some led multicolor strip lights that I bough a while ago for around 5 bucks. I just let it set to red because it goes well with the vinyl strip it came with.

Really ties the room together.

That’s probably the simplest and cheapest of all the modifications but really adds some ambiance around the cabinet.

Because the lights and everything else are in the same power strip that is behind the same Amazon Smart Plug when I say “alexa turn the arcade on” everything lights up with a lot of colors.

Conclusion

This has been a long and fun project. I have been incrementallychanging parts and adding modifications. It’s slow and it’s not a single weekend project. It’s good to spend time on each iteration and getting a felling of what needs to be improved. There is still some room for a few more lights and maybe a beer holder. Other than that the next changes should be on software.

Mortal Kombat Arcade Cabinet from Arcade1UP – Part 3: More buttons

Check out the all parts of the Mortal Kombat Arcade Cabinet from Arcade1UP serie:

I decided to add a second control deck to this cabinet using the wood panel that already came with the original machine. My initial plan was to add 4 more buttons so each player would have 2 extra buttons for games that requires a lot of buttons.

Prototyping

Before committing to a layout and irreversible woodworking I build a crude but functional prototype out of cardboard.

Cardboard prototype

The prototype was important to realize this was not the layout I wanted. I wanted more buttons. The original control deck has 7 buttons for each of the 2 players. Usually this would be enough but you have to use one of them to the start button and another for coin button. You also need a special button to exit the emulator. That’s 3 out of 7 buttons. Only 4 left for the core gameplay itself. Because this machine should be generic for many types of games I decided to add 3 more buttons for each player so each player has a total of 10 buttons.

The cardboard prototype is an optional step but it was easy and quick to do, it’s fully functional, and provided me some insights for the next steps. I used a piece of cardboard and put the panel J to trace a copy over it using a pencil. Then I cut the cardboard using a craft knife and also cut holes for the buttons. I installed it i the buttons, put the cardboard in the same place of the Panel J, put the wires, and configured the software. I could use the machine like this for some weeks before I moved to the next phase.

Layout

I don’t have a lot of experience with wood so this was my attempt. I had this piece of black coated plywood (45.72 x 17.78 cm ~ 18 x 7 inches) and I wanted to put 6 arcade buttons on it.

46 cm x 18 cm (18 inches x 7 inches)

First I needed a layout for the buttons. By using the prototype for a while I wanted the buttons in the middle of the panel. Some margin from the sides. Some space in the middle for some future project. The method I used to make the lines using a mechanical paper and a rule is the following:

  • First, I measure the number I want on one side. Here, I wanted a straight line in the middle of the panel. I get the height of the panel (7 inches ~ 17.78 cm) divide it by 2 (3 ½ inches ~ 8.89 cm) and mark it down using a mechanical pencil.
  • Second, I do the same thing in the opposite side of the panel.
  • Third, I trace a line between those two points. As I don’t have a rule long enough for this line I used a metal tape measure. Any long straight object will do.
Because I was using a tape measure I used tape to fix it on both side before making the line.

Now repeating this process I got a perpendicular line in the middle of the panel. Then other 2 lines each 1 each away from the border.

Then I did moved another 1 inch to mark where the first button was going to be. This way the first button center is 2 inches away from the border. From this center I moved 2 more inches to find the next center. And then did the same for third center. I repeated the same process for the second player.

I happen to have this circles template that is very handy here. The circle I need is 1 â…› ” (2.8575 cm) and I could use the template to test if the button fits before committing to the whole size. It fits perfectly. This is the same whole size for the other buttons in this Arcade1Up.

Using red graphite and the circles template I made the circles where the buttons would be. This step is not really necessary but I wanted to be sure this looks okay before doing the holes.

Woodworking

I put a old piece of wood bellow the panel I’m going to drill. This way when I go over the panel I will not hit the table. I’m using a 1 â…› ” spade drill from this drill bit set and a Black & Decker LD120VA drill.

Point of no return on this project.
Oh, there is a lot of sawdust. Better do this outside.
6 buttons. 6 holes.

On one side the wholes where clean but in the other side there were these ugly “exit wounds”. As I said, I don’t have a lot of experience with wood. Fortunately this board is the same both sides and I could just clean the side that was supposed to be hidden and use as a front panel.

How could I have avoided this?

Buttons

Buttons installation is just like it was on part 2. In total I could use all the buttons that came with the kit.

6 more buttons

They are close enough from the control board so the wires can reach the connectors. Here I’m glad I did the cardboard prototype because I knew I didn’t need to extend these wires.

No cable management.

As far as configurations go it is the same as in part 2. These buttons behave just like any of the other buttons. For the Raspberry PI this is a computer with two USB joysticks plugged on it. Each with 10 buttons and the directional which is the same as another 4 buttons.

Everything lit.

Conclusion

Now this machine has two joysticks and 20 buttons and 2 joysticks. That is enough to play all the games I want. On the next part of this tutorial I will show how to add better sound and even more lights.

Mortal Kombat Arcade Cabinet from Arcade1UP – Part 1: Out of the box

Check out the all parts of the Mortal Kombat Arcade Cabinet from Arcade1UP serie:

This is the Mortal Kombat Arcade Cabinet from Arcade1UP. It’s a complete arcade machine with a smaller size for someone who’s tired of playing ios games for money. Out of the box (and after assembly) this machine can play 3 original Mortal Kombat games:

  • Mortal Kombat (1992)
  • Mortal Kombat II (1993)
  • Ultimate Mortal Kombat 3 (1995)

It comes with everything you need to play the games. It has joysticks for 2 players, embedded screen and sound. It’s powered by a regular power outlet.

Dimensions: This unit (with the raiser at the bottom) weight 58.5 lbs (26.5 kg) and have height of 45.8” (116.33 cm), length of 22.75” (58.78 cm), and width 19″ (48.26 cm). It is said that Arcade1UP machines are 3/4 of the size of a regular arcade cabinet. The riser has length of 20.5″ (52.07 cm), width of 19.75″ (50.17 cm) and height of 13.25″ (33.65 cm). With the raiser, it has a perfect size for me with controls and monitors at the right height. Seating at the stool makes it even more comfortable.

This machine has the Raiden painted on it’s side just like the original MK2 machine. This is probably my favorite thing about this cabinet.

Dog for size comparison. Dog not included.

Gameplay

While this is not an original Midway arcade system board, all gameplay is executed through some form of emulation. You don’t have to deal with any artifacts of emulation or even have to think about it. The machine just works. You turn it on and you are playing Mortal Kombat in a few seconds. No coins. No charging gamepads batteries. No software updates. No DLCs. No cables. No wifi. No where is the TV remote. Just Mortal Kombat one simple power button away from you.

All games are working perfectly. I could not notice any flaws. I’m sure some arcade hard-core enthusiast will find some minor obscure detail that is different from an original coin operated vintage machine but I could not notice any difference.

The emulation is straight forward, there are no filters, no settings, no save states.

This of course uses LCD screen and not a big CRT monitor. The screen is 17″ which is a great size. As everything else, you can’t change brightness, contrasts, or anything. However, I have no problems with the default configurations it came with.

light up marquee

Control deck

The control deck can support up to 2 players. Each player has 7 buttons and a joystick. The start button is wired to the start input and the coin input. So by pressing start is the same as inserting a coin and pressing start. There is a power switch for the whole machine. There is a volume switch with 3 states: mute, medium and high.

The buttons are not great but usable and functional. They have a cheap feeling and don’t make a characteristic click when you press them. However, they work, they submit the input and have the proper size.

The joystick also is functional, clicky and usable but could be of better quality. I like that they use a bat top handle which I find preferable for fight games and is the same type used in the original MK machines.

This one comes with the transparent deck protector to avoid scratches in the deck paint.

It’s a okay control deck. Keep in mind that arcade controls is a whole field for hobbyists with many different brands of joysticks, buttons, and setups. All with very broad price ranges.

Mortal Kombat custom stool

Stool

The Mortal Kombat custom stool is great. I would probably never buy this one by itself but I’m glad I have it now. It has a glossy finish that looks great. It feels great, it’s comfortable and while you cannot adjust the height I found it just perfect for this machine.

Marquee light

This is a great addition to this machine. It really enhances the look and feel of an arcade machine. That is something that I definitely would add to any Arcade1UP machine. It’s just a plastic piece with a light behind it. My only criticism is that the colors of the marquee are a little bit desaturated.

Pricing

I bought this bundle at Costco and it set me back US$ 350. All prices mentioned here are without taxes, fees and shipping. This bundle includes the machine and a custom stool, light up marquee, custom riser, and the arcade cabinet.

These are some current prices for everything individually.

  • MK custom stool: I found it at GameStop for US$ 80.
  • MK light up marquee: I found one at Amazon for US$ 60.
  • MK Arcade1up: you can find it at Walmart for US$ 299.
  • Deck protector: Arcade1UP sell them for around US$ 12.50.
  • MK custom riser: it seems to be exclusive at the moment but you can buy a standard riser at Walmart for US$ 49 and a set stickers at eBay US$ 55 (total US$ 104) or buy a bundle of arcade and riser at Walmart for US$ 379.

Therefore, right now to replicate this Costco bundle elsewhere it would cost US$ 531.50, i.e. US$ 181.50 more than Costco.

However, these prices fluctuate. These units are heavy and large (45.8”H x 22.75”L x 19”W), therefore occupying a lot of shelf space and they are expensive to ship too. So it’s been common to see the prices of them getting lower (examples) and it’s predictable that during Black Friday and holidays they will go lower again. However, in my personal experience these deals sell fast and I have made several unsuccessful trips trying to get one for a lower price.

Also, let’s keep some things in perspective here for price. First, a real Mortal Kombat II arcade machine is much more expensive, starting from around US $1000. Second, Costco is a paid membership based store. If you are comparing prices keep in mind that you can’t buy at Costco without a membership (starting at US$ 60).

Assembly

The pieces themselves are well labeled with codes. However, the boxes didn’t have any labels. After you open all the boxes and found all the pieces, the assembly can go smoothly. The process is almost the same to assemble an IKEA furniture.

These were some of the problems I faced during the assembly:

  • The pictures for the monitor in the manual did not match the real monitor. That’s because the manual is generic for all machines but machines are slightly different.
  • One package of screws was mislabeled.
  • There was misalignment when mounting the screen piece to the cabinet. That was the only hard part of the assembly.
  • The back panel was missing the screw holes to align to the screw holes inside.
Fore reference, here is the Arcade1UP complete assembly manual.

Secret Menu

You have to do this when the machine is in demo mode inside one of the games. With Player 1, hold the buttons RUN + BLOCK. With player 2, hold the buttons JUMP (UP) + LOW PUNCH + HIGH KICK + START (player 2). Hold them all for 5 seconds.

You are now in the Test Menu. Here you can run tests and change settings such difficulty and volume. This is not an Arcade1UP menu, it’s the original test menu from the arcade games. This was supposed to be used by the arcade owner (and not the arcade player) to change settings, reset high scores, see statistics and change prices.

Conclusion

This product has a limited scope and great execution. It’s a simple machine that does one thing and it does it well: retro arcade Mortal Kombat. It has a sweet point of compromise between an humongous original arcade and a convenient little console while keeping all the characteristics that it feel like an original arcade experience.

Arcade1UP machines
Dimensions and size comparison

Arcade1UP has a great product but they are iterating very well. They started with older titles and are now expanding for some other franchises. They are also experimenting with different arcade types. I hope they keep improving the quality of their products.

While there are ports or emulation of MK 1-3 on pc and modern devices you just can’t emulate the feeling of playing with an arcade machine with all colors, lights, and size. This is a device for someone for is seeking this feeling.

And while I like Mortal Kombat and this machine, the main reason I bought it was to use it as base for further enhancements and modifications. I’m replacing all button, joysticks, lights, computer, and who knows what more. I will transform this machine into a multi-arcade beast with my favorite games.

JavaFX, Simple Tile Set

Tile sets are a very simple way to draw scenarios with repeated elements. From simple to complex ones using a very low footprint.

First step, load the png file that stores the tileset into a Image. The file tiles.png shoud be in the same directory of the source code. I adjusted some tiles from those tile set I’ve blogged here before into a grid of 10×10 tiles.

Set of tiles, example

var tileset = Image {
   url: "{__DIR__}tiles.png"
}

Notice that each tile have 32 of height and 32 of width. We will assume this and use theses numbers when performing calculations to find a single tile in our tile set.

def w = 32;
def h = 32;

To display a Image in the screen we use a ImageView node. A ImageView can have a viewport property to create crop or zoom effect. A viewport is just a Rectangle2D, a object with position (minX and minY), height and width. If we want to display the first tile in the tileset we do

first tile

ImageView {
   image: tileset
   viewport: Rectangle2D{
      minX: 0, minY: 0, height: 32, width: 32
   }
}

Notice that the minX determines the column and minY the row in the tileset. The first row is 0*32, the second row is 1*32 and so on. If we want to display the tile at the second line and third column of the tileset we do

another_tile

ImageView {
   image: tileset
   viewport: Rectangle2D{
      minX: 2 * 32 , minY: 1*32, height: 32, width: 32
   }
}

Those properties in a Rectangle2D are for init and read only. So I created a list with all Rectangles I can need for use as a viewport.

def viewports = for (row in [0..9]) {
   for (col in [0..9]) {
       Rectangle2D{
           minX: col * w, minY: row * h, height: w, width: h
       }
   }
}

The scenario map is stored in another list. The first element of the list is 7, that is, the first tile in the scenario is the 7th tile from the tile set.

var map = [
    7,  3,  3,  3,  3,  3,  3,  3,  3,  8,
   19, 26, 40, 41, 24, 13, 13, 23, 24, 19,
   19, 36, 50, 51, 34,  2,  2,  2, 34, 19,
   19,  2,  2,  2,  2,  2,  2,  2, 25, 19,
   19, 57, 58, 44, 45, 46,  2,  2, 35, 19,
   27,  3,  3,  6, 55, 56,  5,  3,  3, 38,
   19, 60, 13, 16, 47, 48, 15, 13, 61, 19,
   19, 70,  1, 33,  1,  1,  1,  1, 71, 19,
   19,  1,  1,  1,  1,  1,  1,  1, 49, 19,
   17,  9,  9,  9,  9,  9,  9,  9,  9, 18,
];

Finally to create a scenario with 100 tiles, 10 per row and with 10 rows, in a list called tiles. Each iteration of this loop creates a ImageView. Each ImageView will store a single tile. We get the tile number in the map list and so use it to index the viewports list.

var tiles =  for (row in [0..9]) {
   for (col in [0..9]) {
      ImageView {
         x: col * w, y: row * h,
         viewport: bind viewports[map[row * 10 + col]]
         image: tileset
      }
   }
}

Additionally I added two things to transform this program also in a (extremely)  simple map editor. At each ImageView I added a callback for onMouseClicked event. When you click on a tile, it changes its map position, ie, the tile. The next tile for the left button and the last tile for any other button.

onMouseClicked: function( e: MouseEvent ):Void {
   var amount = if(e.button == MouseButton.PRIMARY) { 1 } else { -1 };
   map[row * 10 + col] = (map[row * 10 + col] + amount) mod 100;
}

The other thing is to print the map list when the program is over. There is the full program:

package tileeditor;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.geometry.Rectangle2D;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.MouseButton;

def w = 32;
def h = 32;

var map = [
    7,  3,  3,  3,  3,  3,  3,  3,  3,  8,
   19, 26, 40, 41, 24, 13, 13, 23, 24, 19,
   19, 36, 50, 51, 34,  2,  2,  2, 34, 19,
   19,  2,  2,  2,  2,  2,  2,  2, 25, 19,
   19, 57, 58, 44, 45, 46,  2,  2, 35, 19,
   27,  3,  3,  6, 55, 56,  5,  3,  3, 38,
   19, 60, 13, 16, 47, 48, 15, 13, 61, 19,
   19, 70,  1, 33,  1,  1,  1,  1, 71, 19,
   19,  1,  1,  1,  1,  1,  1,  1, 49, 19,
   17,  9,  9,  9,  9,  9,  9,  9,  9, 18,
];

var tileset = Image {
    url: "{__DIR__}tiles.png"
}

def viewports = for (row in [0..9]) {
   for (col in [0..9]) {
       Rectangle2D{
           minX: col * w, minY: row * h, height: w, width: h
       }
   }
}

var tiles =  for (row in [0..9]) {
   for (col in [0..9]) {
      ImageView {
         x: col * w, y: row * h,
         viewport: bind viewports[map[row * 10 + col]]
         image: tileset

         onMouseClicked: function( e: MouseEvent ):Void {
            var amount = if(e.button == MouseButton.PRIMARY) { 1 } else { -1 };
            map[row * 10 + col] = (map[row * 10 + col] + amount) mod 100;
         }
      }
   }
}

Stage {
    title: "JavaFX Simple Tile Editor"
    scene: Scene {
        content: [ tiles ]
    }
    onClose: function() {
        println(map);
    }
}

Here is the result for that map

tlemap javafx

And you can try it yourself in your browser. Play it online now.

Here is a video of it working

[youtube]lxuBEoItB5E[/youtube]

Downloads:

Possibilities

We are using just  a image that can handle 100 tiles, tiles.png with less than 30Kb. The map is also composed with 100 tiles. Each tile we can choose between 100 different tiles, so we can compose 10100 different maps (one googol10 ). Most of them are useless and without any sense, but some are cool. 🙂