Raspberry Pi Basics: Setting Up the SD card

So BAM, you're super pumped about getting a Raspberry Pi (from here on I'm going to refer to it as a RPi), but you don't know where to start or what to do to set it up.

That's where I come in!

Things you'll need

There's some things you'll need before we start,

• A Raspberry Pi Computer (RPi)
• A standard size SD card (no cheap knockoff brands, buy a quality one!)
• A computer that can read /write to SD cards (this guide uses a Windows PC)
• A computer with internet access (if you have dial-up, UPGRADE! You'll thank me.)

Clearing the SD card

Lets get that SD card ready
Since the RPi doesn't require you to have a harddrive, they gave you a SD card slot on the bottom of the device. The SD card is where the RPi gets the OS (Operating System) that it will run.

Download & Install Easeus

The first piece of software we need to download is the Easeus Partition Master, CLICK HERE TO DOWNLOAD

This is the FREE home edition, and will be more than capable of what we need it to do.

Partitions, and why we need Easeus

Going off on a tangent to explain why we need this. With windows you normally just have your entire harddrive available to put data on. On other OS' they like to split up the data, for a multitude of reasons. They do this with partitions, which are basically just sections of your storage device that are meant to keep certain data seperate. Windows can ONLY SEE THE FIRST PARTITION. So since we are setting this SD card up to run a distro of Linux, we need to be able to see and work with all the partitions on the SD card.

Back to Business

So go ahead and install the Easeus Partition Master, insert your SD card into the computer, and run Easeus.

When you see this screen

Click on the sentence "Go to main screen". This will load up the main screen of the program.

Deleting/Resizing partitions

The program's main window will list all your storage devices, some information on them, and the partitions that they currently have. You have to find your SD card now, just look for one that has a size close to what the SD card is labeled as. Mine is Disk 4, drive H. If you don't see yours, click the Refresh button on the top left. 

If your SD card has more than 1 row under its "Disk" label, it has multiple partitions.

See, mine has 2

 Start with the last of the partitions on your card (or all of the ones that have asterisks "*" instead of a letter), right click each and click "Delete Partition". (Make sure you have your SD card selected, you could lose a lot/all of data if you did this to your computers main partition!)

It will prompt you if you REALLY want to delete it, click "Yes".

Once you have deleted all but the last partition (the named partition, mine was "H") you will be left with "unallocated" space. This is just space on the storage device that isn't assigned to any partition. Let's fix that! We will extend the named partition to take up all the space by right clicking the partition we have and clicking on "Resize/Move Partition".

Once the popup appears, stretch the sliders to take up the ENTIRE bar, where "Unallocated space before" and "Unallocated space after" are both 0.0, then click "Ok".

IMPORTANT: You must not click "Apply" in the top left of the program to actually apply all of these changes we've been making. If you don't, NOTHING will get changed!

It will prompt you to double check everything, click "Yes" and it will start applying the changes. This can take a while depending on the size and quality of the card, and how fast your computer is. It will send you a popup when it's done, telling you that the operations executed successfully!

Congratulations! We're halfway done with setting up the SD card!

Now to get the Operating System (OS) on that card!

Getting the Operating System on the card

The operating system we're installing isn't like a normal program you install. There's no one click and you're done. With it being a Linux OS, it will have multiple partitions it needs set up, so the developers take a digital screenshot of what a basic setup should look like. All we have to do is write this "image" of the basic OS setup to our storage device (SD card), and we're ready to boot it up!

Getting WinImage

The program we'll be using to write the image to the SD card is called WinImage. CLICK HERE TO DOWNLOAD

On that page, under the 8.5/8.10/8.0 section (this is as of 4/19/13, use the newest NON-beta version), if you have a 64-bit version of Windows, download that file "wima6485.exe". This file is an installer for EASY setup. If you're not sure if you have a 64-bit version of windows or not, download "winima85.exe". It's a 32-bit version which will work on all 32 AND 64 bit versions of windows. (If there is a newer version of winimage available, find the .exe that has in the description to the right either "64-bits" or "32-bits" depending if you KNOW you have 64-bit or not, and make sure at the bottom of its description it says, "This file contains a setup program for easy installations". If there are multiple .exe files that match this, the description should also say what versions of Windows they were made for. That should just about solve it.)

Run the .exe file you jsut downloaded to install WinImage and use all the default settings (unless you know what you're doing).

Now to download the Raspberry Pi's Operating System!

Downloading The RPi's OS

The Raspberry Pi foundations website has a list of operating systems that they know are quality, and made specifically for the RPi. The list (with download links) is available at http://www.raspberrypi.org/downloads

They have a custom OS called "wheezy". It's a RPi version of the popular Linux Debian system. There are actually 2 versions available on the website

• Raspbian "wheezy"
• Soft-float Debian "wheezy"

These are the first 2 OS' listed on the page I linked. They are actually EXACTLY the same, except for one tiny detail. The second option (Soft-float Debian "wheezy") uses a slightly slower, soft-float ABI.

Soft float, what the heck is that? 

Soft float is how the computer calculates floats (fancy computer jargon for numbers with decimal parts). With soft float, the computer calculates decimal parts of numbers with software, just like you would with pen and paper to figure out the floats (decimal numbers). It's slightly slower than having hardware to calculate floats. 

Why does this matter? Well, with the soft-float version you're able to install the Java Virtual Machine, which lets you write, compile, and run Java code and programs! This gives you another language you can use/learn on your RPi. Sweet, huh?

Needless to say, in this tutorial I will be installing the Soft-float Debian "wheezy".

You can download the zip folder by clicking on either torrent or direct download, though I would suggest the Torrent as it will usually be MUCH faster (unless you don't know what a Torrent download is, in that case just click direct download).

Once completed, find out ehere you downloaded the Zip, and extract/unzip it. Inside the created folder you will find a file that has a .img at the end of it (if you have that enabled, if not, dont worry). Remember where this is!

Writing the OS image to your SD card

Open your start menu, click the "Win Image(Administrator)" link from you start menu/programs list. If it prompts you, click "Yes" to give it admin access (it's necessary!).

Click on the "Disk" tab on the toolbar of the program window and select the disk that is the SD card. Mine was named H earlier, so I clicked on "use removable disk H". If you're not sure what drive letter it is, open up "My Computer" and see what letter your SD card is using under removable media. 

IMPORTANT: Make SURE you get the right drive letter, if you mess up you can completely wipe your computer!

Click on Disk, then on "restore virtual Hard disk image on physical drive"

When the popup appears, select the Disk that has the same size storage as your card, mine was a 16GB card, so I selected Disk 3.

When you click "OK", it will have you find where you unzipped/extracted the .img file we downloaded earlier. Navigate to that folder/location and select the file. You might need to click the drop down menu on the bottom right and click "all files".

It will prompt you one last time, letting you know that this is the last chance you have to double check what you're doing, so you don't mess up your harddrive. As long as you've check the drive letters, click "OK" and wait for it to complete!

Once it's finished, close WinImage, and remove your SD card from your computer, because it's done! The SD card is ready to be used. 

In the next tutorial we will go over the first time setup of your Raspberry Pi's operating System!

<< Previous: Raspberry Pi Basics: What the heck IS it?

Raspberry Pi Basics: What the heck IS it?

Welcome! It's been a little while since I posted on here. I've been getting things together in my real life, but that's all straightening out, so time for tutorials!

Lets start with the Raspberry Pi!

Wait, did you say pie?!

Uh, no. I said "pi", as in the mathematical constant. The name "Raspberry Pi" is a play on words. But the actual Raspberry Pi is no joke, it's quite the awesome device.

The Raspberry Pi is a tiny credit-card sized computer brought to us by the people at the Raspberry Pi foundation. It offers the ability to have a full fledged computer for less than $40. This little device has a ton of features,

• Composite video out (yellow circular plug for old tv's)
• HDMI out (for High Def tv's, also outputs sound through this port)
• 3.5mm audio out (headphone jack sized)
• SD card port
• 2 USB ports (rectangle ports, where you plug in keyboards and external hard drives)
• Ethernet port (where you plug the cable in for internet)
• 512MB of RAM (RAM is part of what makes a computer fast)
• GPIO pins (connectors to external parts, *I'll go into this later*)

On a side note, that's for the $35 Model B of the Raspberry Pi. There is a cheaper model A that only costs $25 but it has a few drawbacks.

• Only has 1 USB port
• Only has 256MB of RAM
• Has NO Ethernet Port

You can get both models of the Raspberry Pi from either RS Components, or Element 14. Depending on your current location on our big blue ball of a planet, I would personally suggest Element 14 if you're not in the UK, and RS Components if you are.

Device Benefits

But just being a small computer isn't the only draw to the Raspberry Pi. It's seriously cheap, so quite a few can be bought for the price of a full sized computer, and it will increase the availability of computers to more needy areas. The people at the Raspberry Pi foundation are also hoping to spread computer literacy and to teach more people and kids to program.

I'm willing to bet most of you didn't know what I was talking about when I said the Raspberry Pi had GPIO pins. Well, GPIO stands for General Purpose Input/Output. These little pins let you connect electronic parts, sensors, and motors! This way you can create programs that take control of or get data from these parts! You can make anything from an automated coffeemaker to Doctor Who props! (Or maybe even turn your stairs into a piano.)

All of the Programming!

This little device has serious potential. You have easy access to MANY languages, including (but not limited to)

• Python
• Html5/JS
• Ruby
• C/C++
• Scratch
• Java - only on certain distributions(versions) of Linux (The operating system the Raspberry Pi runs)

What is this "Linux" you speak of?

Well.. Linux is a operating system. If that doesn't make sense, think about this. You can buy a ton of different  brands of computers (Dell, HP, Asus, etc), but they all come with Windows. Windows is an OS (Operating System) too. If you own a Mac, your OS is called OSX, but all the updates have names like Mountain Lion.

Linux was made by Linus Torvalds. Linux's big push was that it was free and open source(you could literally edit the operating system and re-install it). Because of this many people have customized it a released it as a custom distro(short for distribution, its just a custom version of Linux).

But don't worry We'll be getting into all that in the next tutorial!

Next: Raspberry Pi Basics: Setting Up the SD card >>

Fire Sprite update!

Quick update!

Added some new functionality to FireSprite.js today! I wanted the ability to be returned a canvas instead of just a FireSprite object. So by calling the createSpriteCanvas("imgName.png") method of your FireSpriteAtlas you are returned a canvas the exact width and height as the originally packed image, with JUST that image on it. Once you have the canvas you can scale, rotate it and all that jazz manually before drawing it to your game canvas.

Neat, huh.

Check out Fire Sprite on GitHub!

FireSprite! Simple TexturePacker integration to html5/javascript!

I was SOOOO tired of doing sprite sheets manually. So i got fed up and wrote this library. It's neat. I'll do a full/better guide in the coming days, but this is here now to help the Ludum Dare dev's who might need some extra help!

12 Steps to setup FireSprite, make a sprite atlas, and have it pop out a sprite

1. Download FireSprite.js from FireSprite on github

2. Put FireSprite.js somewhere in your HTML5 app/websites directory

3. Add FireSprite.js to your index.html file
     <script type="text/javascript" charset="UTF-8" src="FireSprite.js"></script>
     Use that line if FireSprite is in the same folder as index.html, if not adjust the
     src="path/FireSprite.js" part

4. Use Texture Packer to make a spritesheet, make sure to set your Output Data Format
     to "JSON(Array)"

5. Move your spritesheet and json file into your HTML5 app/websites directory

6. Add the json file to your index.html in a very similar way to the FireSprite.js file
     <script type="text/javascript" charset="UTF-8" src="SpriteSheet.json"></script>

7. Open up your SpriteSheet.json file, the first line looks like this
     {"frames": [
     You need to make it look like this
     var spriteSheetName= {"frames": [
     where "spriteSheetName" is a UNIQUE identifier for this specific sprite sheet (if its just
     enemies, name it "enemy", ect)

8. SAVE it.

9. Make a variable to hold the atlas in your games JS file, where "SpriteSheetAtlas" is a
     unique name for the atlas
     var SpriteSheetAtlas;

10. Initialize the atlas (yours might have "SpriteSheetAtlas" or "spriteSheetName"
     named different things)
     SpriteSheetAtlas= new FireSpriteAtlas(spriteSheetName);

11. Make a sprite! "thisSprite" will be any variable name you want for that specific sprite,
     and keyname.png is whatever name the sprite had before it was packed. You can
     open your SpriteSheet.json file to find out the keynames if you forget!
     var thisSprite = SpriteSheetAtlas.createSprite("keyname.png");

12. Draw it! YourCanvasContext is the context you want it drawn to, and you just pass in
     the X and Y values to draw it at (drawX, and drawY)
     thisSprite.draw(YourCanvasContext, drawX, drawY);

If you need to scale the sprite, just call
thisSprite.scale(2.0);
That sets the scale to whatever number you pass in, instead of 2.0! And you only need to call it once!

That's about it. Like I said, check it out on GitHub!
Also check out TexturePacker if you haven't!

The elusive beast named "Programming"

Programming, coding, scripting. Saying these words brings to mind images of long crazy lines of green text on a black screen, or men with ridiculously long beards. But programming is something that everyone can do, and should at least try for a little bit if they use a computer at all.

Seriously.

Let me say that again. Programming is something EVERYONE who uses a computer can do. The fact that you're reading this blog, on a computer, is enough proof anyone needs to show that they have the ability to code.

But sadly, programming might not be something everyone enjoys. Programming is all about problem solving, and I won't lie to you, it can sometimes be frustrating. Missing simple errors can cause crazy problems, like forgetting to put a lug nut on your car's wheel. You might not notice it immediately, but good lord when it crashes it's going to be elegantly disastrous.

So, what is programming like? Programming is a great mix of many things, some describe it as an art form, while others would say its a technical skill to get something done. Without actually showing you how to program the closest thing I can find is cooking. Yup, cooking. When you program, you're writing extremely specific instructions for the computer to follow, like a cooking recipe, and the ingredients for your "recipe" is the data! The computer will follow every valid instruction you give it, exactly as you tell it to. This is where the trouble comes in for beginner programmers. They think that the computer will just "know" what to do if they don't put every instruction. Not true. Computers are not smart, if you tell it to delete your entire hard drive, guess what? You've just lost all your pictures of kittens. It's a hard truth to accept about computers, but when you're programming, if it's not working, 99.9% of the time it's the programmers fault. BUT, if you learn WHY something isn't working, you'll be on the fast track to becoming a great programmer.

Also, Google search is your friend. Your BEST friend. You should know almost everything about Google's advanced search by the time you're making your own applications!

Don't worry guys, the actual programming is coming! But having some background is going to help a ton. Understanding whats going on in programs is extremely important, and understanding the underlying principles and ideas of programming is what will make you an amazing programmer/engineer/hobbyist/ninja!

(I can't promise that if you DO become a ninja we won't be rivals!)

Me, this blog, and other junk!

Hello there internet,

My name is Nicholas Wrenn, and I'm the programmer for Golden Vault Games (GVG). I'm coming from mainly a 2D Java/Android developer background using LibGdx from BadlogicGames, which is sweet! (Check it out if you use Java) with a little bit of experience in C/C#/C++. I've recently had some side projects and urgings to start with 3D, non-mobile development, but that's another story!

My main adventure recently has been deciding how to make our first commercial game, Mutant Mole Mayhem, available on both Android AND iOS. I searched around and saw cross-compilers, scripting languages like LUA, but nothing seemed to be an exact fit for what i wanted.

That is, until I saw the power of HTML 5! (power that it didn't have just a year ago!)

Html 5 is actually a collection of 3 things, (more on this later) that blend together allowing almost any computer and web browser combination (including phones!) to be a target for developing! KA-KOW, I knew instantly I had found exactly what I needed. Combined with the extra performance offered by CocoonJS (a way to package HTML5 apps into a downloadable file on each phone's respective marketplace, specifically for games), I wouldn't have any extra concerns about performance and portability.

But making games/apps isn't the only thing that I enjoy. I want to help spread my knowledge of programming and video game development. It's something that so many people pass up, but is EXTREMELY rewarding making your own software and games.

This blog will mostly have 4 types of posts on it, they are

1. Advetures: these posts will follow my adventures into learning a language/framework. They will follow that path I took to learn the topic, while trying to minimize any setbacks/problems I experience.
2. Dive-ins: these posts will have specialized information on a specific topic, (eg: JavaScript game development, platformer physics/development). But these will not cover every aspect of Html 5 and javascript, just what is needed to make a game, though I will explain everything we use in the examples.
3. In-Depths: In-Depths are going to be the big posts. These posts will try to cover topics in such a broad way that get you familiar will many different aspects of a subject. (eg: the Html and JavaScript language posts will try to go over as much of the language as possible)
4. Randoms: Admittedly, I might post updates to things going on with Golden Vault Games, cool technology/programming/game industry things, and possibly some random photos of super cool stuff. (but it'll be AWEEEEEESOME)

Hopefully over the length of this blog I'll be able to get everyone as pumped as I am about programming and video game development!

C'ya soon!

-Nicholas Wrenn