| |
|---|
| Welcome to Warrior Cats A RPG. We hope you enjoy your visit, brave Warrior. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| The 2-Month Guide to Programming for the IPhone; WIP 60 hands-on lessons that will teach you how to create an app. | |
|---|---|
| Tweet Topic Started: Jul 23 2013, 12:08 PM (96 Views) | |
| Clawpaw | Jul 23 2013, 12:08 PM Post #1 |
|
Elder
![]() ![]() ![]() ![]() ![]() ![]()
|
This guide will have 60 lessons, each covering various critical things in programming. It will span 3 coding languages, Processing, Java, and Objective-C (in that order). We will work on 3 projects, one for each language, starting with a Zelda-like game for Processing. Part 1: Processing Spoiler: click to toggle Day 1: Getting started with Processing! Spoiler: click to toggle First, go here to download Processing: http://processing.org/download Why start with Processing, you may be asking yourself. Why not start with Objective-C, which is what you use to make IPhone/IPad apps? Well, the answer is simple. Processing is a very hands-on language. It is very easy to start with, make a cool program, and be proud of yourself. Java and Objective-C are a bit harder to do stuff like that in. Trust me. I HATE Objective-C's syntax, it's so hard to learn really quickly like you can with Processing and Java. I go to Java after Processing because Java is about as hard as Obj-C, except for that fact that its syntax is a lot like Processing, so its a good stepping stone. What is syntax? Syntax is the 'grammar' of coding. You might not understand what that means, but as the tutorial progresses it'll make sense. After downloading Processing, start it up. You should get something like this: Spoiler: click to toggle ![]() Now, press this button: ![]() That's the run button. It runs the program. Obviously, the button next to it is the stop button. When you run the program, you should get something like this: Spoiler: click to toggle ![]() There's nothing in it for now. That's because we haven't put any code in yet. Over the course of this week and next, we'll make this blank project become a 2D rpg. The first step is to learn how to draw in it. Try typing this in:
It should look like this: Spoiler: click to toggle ![]() If not, make sure you typed in the semicolon at the end. Before we break apart what rect(); does, let's wrap it up in a 'void.' You don't need to know what 'void' does right now, that's day 2.
It should now look like this: Spoiler: click to toggle ![]() What just happened??? OMG, things changed! I'll break it apart for you.
This part is the most essential. For now, I won't go over this. Just put ALL of your code inbetween the {}s.
This sets the size of the window that pops up, in pixels. Without size();, the computer will do the default size, which is smaller than the minimum size for a window, hence the window looking a little weird (don't know if the weird-window thing only happens on macs or not. If so, its no big deal).
The 'rect' part of the statement says to the computer "Hello, Mr Mac/Winnie(née Windows)/Linel(né Linux), we want to draw a rectangle! The 0,0,10,10 part are the statement's parameters. They affect what comes out. The first two numbers are the rectangle's upper left corner's x & y positions, and the last two are the size of it horizontally and vertically. We'll cover more on that later. One last thing you should know... Notice how I said that the 0,0 part is the x&y coords? But wait... Wouldn't the rect be on the bottom of the screen? NO. The higher the y value, the LOWER it is on the screen, not like in pre-algebra graphs where the bigger y is, the higher the point is. Try typing in
instead and see how the program changes. Day 2: Basic Shapes and Colors Spoiler: click to toggle We've already learned about rect();, so let's learn about other kinds of shapes. We'll start with the most basic, point();
Run the program, then look closely. You should see a black dot slightly to the right and a bit below the rectangle. That's a point. I shouldn't have to explain point();'s parameters, if you've ever worked with graphs you would understand. However, I will, just in case. The first parameter is the x coord, and the second is the y coord. A point(); is the size of a pixel.
Let's add a line(); now. The first two parameters are the x/y coords of the beginning, and the last two are the line's end point.
The next shape we can draw is called ellipse(); You use it to draw circles and ovals. The first two parameters are the ellipse's CENTER, unlike how the rect(); is drawn from the corner. The next two parameters are the diameter horizontally, and the diameter vertically. Now we get into colors. The shapes are pretty boring right now. You should have a screen that looks like this: ![]() To add colors, we have 4 simple lines.
As you can probably guess, fill(); fills the shape, and noFill(); makes the shape have no filling. stroke(); is used for the borders of shapes. If you look closely, all the shapes have a black outline around them, with the exception of point(); and line();, which ARE the black outlines themselves. The white part of the shape, the middle, can be changed with fill(); and noFill();, and the black part is controlled by stroke(); and noStroke();. Now for a brief lesson on what the (r,g,b) is in the fill(); and stroke();. Its something called an rgb value. If you are familiar with rgb values, skip the spoiler below. If not, then check the spoiler. Spoiler: click to toggle rgb stands for 'Red, Green, Blue.' They are numbers from 0-255. The reason for this is that there are 256 numbers in the range from 0-255, because of the 0. 256 is an 8-bit number that translates perfectly into binary. I'm sure you have all heard of binary, so I won't go into it, as it won't have any affect on the level of coding you're at right now. If you're confused, look it up. Basically, 256 is a really easy number for your computer to understand. Anyways, the bigger the number, the more of that color it is.
You can also use what is called greyscale, which is basically this:
Greyscale is just like rgb, except that you can only work with grey colors. Only use it if you want grey. Otherwise, there's no need. However, if you want grey, ALWAYS use this, as it takes 1/3 the amount of bits. (In rgb, there are 3 8-bit numbers, which is 24 bits. In greyscale, you only use 1 8-bit number. Nice, huh?) There is another parameter you can use, which is the alpha value. If you've done image editing, you probably know what alpha is. Its transparency. Once again, its a number 0-255. It works like this:
If 'a' is 255, there is 100% opacity (opacity is the lack of transparency (or if you want to be all philosophical: transparency is the lack of opacity)). So is 'a' is 0, the fill is 0% opaque, or 100% transparent. Anything inbetween is a different level of transparency/opacity, with big numbers being more opaque/less transparent. There are other ways of using fill, such as hsb values, but you don't need to worry about those. Now, let's put this theory into practice!
Create a new processing 'sketch' (name for a processing file) and put this in there. If you don't know how to make a new 'sketch', you just go to 'file -> new'. Also, the button next to the stop button will make a new 'sketch' as well.
![]() Ta-dah!!!!!!!!!!!... Wait a second? Where did the line go? And why was the rectangle that we left alone the same as the second rect... WHY??? The answer is simple, folks. fill();,noFill();,stroke();, and noStroke(); apply to EVERYTHING below it, not just the shape right below it. So the rectangle that we left alone saw fill(0,0,0,127); and used it as well. The line below it disappeared because it saw the noStroke();, and, since the line itself is a stroke, it didn't get drawn... T_T. Let's fix this, shall we?
What I did was add in an extra fill(); and stroke(); so that the shapes were set to what I wanted them to be set to. ![]() Ta-dah! Now it works! Tomorrow I'll teach you about variables and statements/loops, then I'll talk about arrays, and then the day after you'll learn about... *wait for it*... 'OOP'! Day 3: Variables and Statements Spoiler: click to toggle I'm sure you all know what a variable is, from math. You know, something like 'x' in the equation 3+x=5. We can do that in processing too.
Set your code up like this. You may be wandering what draw is. They will be explained in detail in two lessons, so I'll keep my explanation short. They're called methods (or, depending on which coding language you grew up with, you might call them 'functions'). Basically, setup() and draw() are built-in methods; methods that get 'called' by the system itself instead of by you. Basically, what happens is that all the code inside of setup()'s {}s is run by the computer when it first starts. AS SOON AS all the code in setup() is finished, the system runs all the code inside of draw()'s {}s. When draw is finished, the system runs the code in draw() again and again and again. So setup() is where you want all your code that you only need to do once, and draw() is where the actual program goes.
What did I just do? Using 'int', which stands for 'integer', I created the variable x, and made x = 0. There are multiple types of variables, like 'int', which is only for - and + whole numbers. There is also 'float', which is for numbers with decimal points. Tip: float MUST have a decimal point, and int may NOT have a decimal point. There is also type 'char', which stands for 'character'. Anything that you can TYPE with a keyboard is a char. Note that this means that 'enter' is not a char, and neither is f5 or shift, to name a few. A good rule of thumb is only things that will show up in a word document, such as a-z, the spacebar, 0-9,etc. There is also String (note that it is the only one I capitalized). A String is basically a char, except it can fit more than one. So while you can have 5 chars, one that is 'h', another that is 'e', two that are 'l', and 1 that is 'o', you only need 1 String to do that, "hello". Here's an example of how you would 'declare' them all (In coding lingo, to declare something means to create a variable).
*Before I continue, I want to clear something up. Notice how I do '//' this every so often? That is a comment. It 'comments' everything out from where it begins to the end of the line (the computer doesn't read comments while running the code). Since I don't want to take up space with this mini-lesson, read the spoiler to learn more if you wish. Spoiler: click to toggle
Take note of how I declared 'String' with " "s, and 'char' with ' 's. You'll get an error if you mix that up. There are other types of variables, but that's all you need to know until Java. You can also change variables.
Now we've made x equal to two.
Now, x is 3. This time, though, we ADDED 3 instead of just saying that it equals 3. *Quick not on coding math. + and - are obvious. * is multiplication, however, and / is division. % is the 'modulus.' Basically, it gives you the 'remainder'. 5%2 is 1 because 5/2 is 2 with a remainder of 1. We can even add with other variables!
x will equal 10, because 2/2 + 9 = 10. *One last quick note: Computers aren't that good at algebra. To them, x = y/2 + x is fine, but y/2 + x = x is just jibber-jabber. It will give you an error. Now, on to 'statements': *To be continued, taking a break in typing!* Day 4: Arrays, Loops, and Variable Scope Spoiler: click to toggle Coming 7/26/13 Day 5: Methods Spoiler: click to toggle Coming 7/27/13 Day 6: OOP Spoiler: click to toggle Coming 7/28/13 Day 7: (End of Week 1) Images Spoiler: click to toggle Coming 7/29/13 Day 8: Creating a Game World! Spoiler: click to toggle Coming 7/30/13 Day 9: Improving your Game World! Spoiler: click to toggle Coming 7/31/13 Day 10: Creating an Entity Spoiler: click to toggle Coming 8/1/13 Day 11: Adding Enemies Spoiler: click to toggle Coming 8/2/13 Day 12: Adding Secrets Spoiler: click to toggle Coming 8/3/13 Day 13: Finishing the Game I Spoiler: click to toggle Coming 8/4/13 Day 14: (End of Week 2) Finishing the Game II Spoiler: click to toggle Coming 8/5/13 Credits: Spoiler: click to toggle Guide by: Mewthree(Clawpaw) Edited by Clawpaw, Jul 25 2013, 02:12 PM.
|
|
Current list of names I go by: Clawpaw/Mewthree/Mew/M3/ClwPw/Joe/Aardvark/Eenie Meenie Minie Toe/Fred/Trainer Mewthree/(Insert Name Here) A proud member of:
| |
| Offline Profile | Quote ^^^ |
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Helping Paws · Next Topic » |











7:36 PM Jul 10