Tutorials

CodeaNoob · March 2013

-- Tutorial #1
-- 
-- Use this function to perform your initial setup
function setup() -- The beginning of a specific "job" that Codea does
    print("Hello World!") -- Edit between the ".." to change the text
end -- This ends that "job"

-- This function gets called once every frame
function draw()--This draws all the things that are constantly renewed in the game/Simulation.
    -- This sets a dark background color 
    background(40, 40, 50)-- Sets the background shade

    -- This sets the line thickness
    strokeWidth(5) -- if you have circles and have hasStroke toggled to true, this sets the width of the stroke

    -- Do your drawing here
        pushStyle()-- adds current copy to "stack" of drawn images

    fill(180,10,30)-- sets the circles color

    ellipse(300,500,177,168)--Sets the sizeof the Ellipse/Circle

    popStyle()-- "Pops" current draw off of the "stack"
end

-- what this draws is Codea's Classic red circle with white outline.

-- This is just a preview of Issue #1, Full Edition Out soon.

Dalorbi · March 2013

Awesome, seems simple and nicely explained, though pop sytyle and push style werent explained too well. Other than that Excellent

CodeaNoob · March 2013

Im explaining them better in the full thing, i just published this to give people a taste of the quality of my tutorials

aciolino · March 2013

You might consider an opening paragraph explains what you are about to explain, and a closing one saying what it was you explained.

CodeaNoob · March 2013

Good idea @aciolino,

Ignatz · March 2013

I would give an overview before diving into the detail, ie

setup - lets you get everything ready
draw - draws what you see on screen. Its not like normal code, where you draw something and it stays there until you change it. This is like a movie, where you have to keep drawing the screen over and over, many times a second, which is suited to animation. In fact, draw runs about 60 times a second.

I wouldn't put pushstyle and popstyle in the first tutorial at all, just keep it really really simple.

CodeaNoob · March 2013

Thanks for the feedback, ill make the changes

Ignatz · March 2013

I've just posted an example for the topic called Gravity, that might be useful in a tutorial. It demonstrates simple gravity and has a lot of explanations.

I know when I was starting out just a few weeks ago, I didn't understand that

sprites were just drawings or
how gravity was attached to them, or
that you didn't need the debugDraw class from the Physics lab, or
how the business of rearranging styles or the matrix came before drawing anything.

CodeaNoob · March 2013

I saw that earlier and it was quite good

CodeaNoob · March 2013

I am adding a small introduction of gravity in the full tut

Ignatz · March 2013

I would keep each tutorial quite small, ie don't try to do too much, and explain as much as possible. Also, I think it works quite well to keep extending the same example from one tutorial to the next, so people can just keep working with a familiar example.

CodeaNoob · March 2013

That was my plan, i want it to be like the for kids tutorial

CodeaNoob · March 2013

-- Tutorial #1
--By: CodeaNoob
-- Vocab for this Tutorial:
-- CallBack Function: A function that checks to see if something is done, like a returned phone call  you want to see what they want.
-- Variable: is something that is Creator-Defined. Can represent anything you want. 
-- Im using it to represent Gravity
-- Sprite: A image from your Camera Roll, or art from provided sprite packs.


-- Use this function to perform your initial setup
function setup() -- The beginning of a specific "job" that Codea does. This one is setting up the game before the drawing happens.
    parameter.action("Clear Output", output.clear)--This parameter is a button. 
    -- the Red Letters between the ".." are the Variable(or whats on the button, while the blue is the callback function.
    parameter.watch("X")-- The simplist of parameters. They just watch the Variable the whole simulation/Game.
   parameter.text("TitleText", "Tutorial #1", function(t) print(t) end )
    -- This isnt the only way to do it, but this way is what i prefer as it is simpler
X = Gravity -- This shows Codea that the Variable X turn is a diffrent name for Gravity.
  -- More Parameters will be in future Tuts.
end -- This ends the function


-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)-- Sets the background shade
    fill(255) -- Sets the colour of the text
    fontSize(40) -- how big the font is
    font("AmericanTypewriter-Bold")-- the style of font

    -- Draw text using the 'TitleText' parameter exposed
    --  in setup() above
    text(TitleText, WIDTH/2, HEIGHT - 100)
    -- This sets the line thickness
    strokeWidth(5) -- if you have circles, this sets the width of the stroke
text(TitleText, WIDTH/2, HEIGHT - 100)
    -- Do your drawing here
    pushStyle()-- I will explain these in a different tutorial. 
    -- Don't worry about them.
    spriteMode(CENTER) -- Sets the spawn point for the sprite
    sprite("Cargo Bot:Codea Icon", WIDTH/2, HEIGHT/2)-- this draws the Codea Icon
    popStyle()-- Sorry Again
  end
-- Thats it for Tutorial #1, If you have any questions orrequests for the next tut, PM me at codeanoob@icloud.com
-- Later

pewbert · March 2013

NICE!

Dalorbi · March 2013

awesome, nicely done

CodeaNoob · March 2013

Dont forget, you can PM me at codeanoob@icloud.com to give me requests for whats come next

CodeaNoob · March 2013

-- Tutorial #2
--By: CodeaNoob
-- Vocab for Tutorials:
-- CallBack Function: A function that checks to see if something is done, like a returned phone call, you want to see what they wanted.
-- Variable: is something that is Creator-Defined. Can represent anything you want.
-- Sprite: A image from your Camera Roll, or art from provided sprite packs.
-- integer: A number that can be positive or negative.


-- Use this function to perform your initial setup
function setup() -- The beginning of a specific "job" that Codea does. This one is setting up the game before the drawing happens.
    parameter.integer("SpriteWidth", 356, 500)
parameter.action("Clear Output", output.clear)--This parameter is a button. 
    -- the Red Letters between the ".." are the Variable(or whats on the button, while the blue is the callback function.
    parameter.watch("X")-- The simplist of parameters. They just watch the Variable the whole simulation/Game.
     parameter.color("TextColour", 255, 27, 255)-- This sets a color changing parameter that is user-Edited. See fill() in the draw() function for the rest.
    parameter.color("RectColour", 255, 50, 190)
    -- RectColour is a variable for the fill() of the Rectangle/Square.

   parameter.text("TitleText", "Tutorial #2", function(t) print(t) end )
 -- This isnt the only way to do it, but this way is what i prefer as it is simpler.

X = Gravity -- This shows Codea that the Variable X is a different name for Gravity.
end -- This ends the function


-- This function gets called once every frame
function draw()

    fill(TextColour)-- This is what changes the text colour.
    -- This sets a dark background color 
    background(40, 40, 50)-- Sets the background shade
    fontSize(40) -- how big the font is
    font("AmericanTypewriter-Bold")-- the style of font

    -- Draw text using the 'TitleText' parameter exposed
    --  in setup() above
    text(TitleText, WIDTH/2, HEIGHT - 100)
    -- This sets the line thickness
    strokeWidth(5) -- if you have circles, this sets the width of the stroke, in Pixels.
text(TitleText, WIDTH/2, HEIGHT - 100)
    -- Do your drawing here
    pushStyle()-- I will explain these in a different tutorial. 
    -- Don't worry about them.
    spriteMode(CENTER) -- Sets the spawn point for the sprite
    sprite("Cargo Bot:Codea Icon", WIDTH/2, HEIGHT/2, SpriteWidth)-- this draws the Codea Icon
    popStyle()-- Sorry Again
        fill(RectColour)
    rect(100, 100, 100, 100)
    end
-- This draws a Square/Rectangle with the given width and height at the X and Y coordinates given.

  function touched(touch) -- A function that handles the touches on screen.
    if touch.tapCount == 1 and touch.state == ENDED then --this checks if you've tapped twice on the screen and if the last touch has ended, only then will it proceed to the purpose of the touches.
startRecording() -- Records the screen, A cool addition if you want to record the screen without the record button.
end
end -- Two ends are needed because there are two things working in this function.
-- Thats it for Tutorial #2, If you have any questions or requests for the next tut, PM me at codeanoob@icloud.com
-- Later

pewbert · March 2013

recommendation: lua stuff, loops, tables, maybe math stuff etc?

CodeaNoob · March 2013

Just learning it now, shiuld be in the next tut

Howdy, Stranger!

Categories

In this Discussion

Tutorials

Comments