Turn anything on your screen into a playable Super Mario Bros game

Ever wanted to turn something on your computer into a playable game of Super Mario Brothers?  Well, of course you do.

Dream no more. Aaron Randall just made all of our big kid dreams come true with Screentendo.

Screentendo is a Mac app that runs through Xcode, allowing you to drag a semi-transparent window over any part of your screen. Whatever is inside of that window will be analyzed and turned into Super Mario Brothers world, complete with a little Mario that you can move around.

This concept came about when Randall, who was wanting to learn Cocoa and Sprite Kit technologies, joked with a friend who stared at bar graphs all day as part of his job that one day he would make those boring bar graphs much more enjoyable to look at.

He goes into detail about how the game works, which is an interesting read, over at his blog.

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

It does take a bit of time to get it running on your Mac, but is still doable. You must have Xcode running on your Mac OSX Yosemite with Cocoapods installed in order to use Screentendo. For those who want to play, here is how to get it running on your Mac:

• Must have Mac OSX 10.10 Yosemite.
• Download the Screentendo files from Github and unzip them.
• Download and install Xcode through the App Store.
• Open Terminal on your Mac and copy and paste the bold text below into Terminal and hit enter (this installs Cocoapods, already included on Macs). It may ask for your admin password to proceed:

  sudo gem install cocoapods

• From there, navigate to where the Screentendo files are in Terminal. For me, the files were downloaded in zip form to my Downloads folder, and I unzipped them there where the resulting folder was called “Screentendo-master.” If they are in your Downloads folder, copy and paste the following bold text into your Terminal:

  cd ~/Downloads/Screentendo-master

• Finally, once it says you are in that folder, copy and paste the following bold text into Terminal and hit enter:

  pod install

• Wait until it is completed and takes you back to where you can enter in another command, then close Terminal.
• Double click “Screentendo.xcworkspace” in the “Screentendo-master” folder to open. This will auto-open in Xcode.
• Once Xcode comes up, press the “Play” button in the top left of the screen. Give it a few seconds to load, then you will see Screentendo show up in your dock, and a semi-transparent window will appear.
• Drag the window and resize over what you want to play Screentendo on, then click inside the screen to make it opaque. Be patient and wait a few minutes then the blocks should start to load.

I was able to play around with Screentendo and turned The Next Web’s logo into Super Mario Brothers (it didn’t recognize the smaller type all that well, but it is still pretty cool).

High contrast areas such as logos on white backgrounds appear to work best, as Randall demonstrates as well with the Google logo in the short video demonstration above.

Randall notes that there are some limitations to his app, such as slow block rendering, and it requires a good amount of contrast to detect and properly render. It also only works on Mac OSX Yosemite. The larger the area you try to capture, the slower the start of the block rendering is, so best try it out on smaller areas first.

Just goes to show that if you want to learn a new technology, you can still build something pretty cool with your new found skills. Now I won’t get any work done today.

➤ Screentendo