Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Tutorials

edited March 2013 in General Posts: 835
-- 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.

Comments

  • Posts: 182

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

  • Posts: 835

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

  • Posts: 666

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

  • Posts: 835

    Good idea @aciolino,

  • IgnatzIgnatz Mod
    edited March 2013 Posts: 5,396

    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.

  • Posts: 835

    Thanks for the feedback, ill make the changes

  • IgnatzIgnatz Mod
    edited March 2013 Posts: 5,396

    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.
  • Posts: 835

    I saw that earlier and it was quite good

  • Posts: 835

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

  • IgnatzIgnatz Mod
    Posts: 5,396

    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.

  • Posts: 835

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

  • edited March 2013 Posts: 835
    -- 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
    
  • Posts: 41

    NICE!

  • Posts: 182

    awesome, nicely done

  • Posts: 835

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

  • Posts: 835
    -- 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
    
  • Posts: 41

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

  • Posts: 835

    Just learning it now, shiuld be in the next tut

Sign In or Register to comment.