I need help on a project (beginner)

D4rk_Code

I'm re-making atari's "asteroids" the 2600 version, not the arcade, I like the 2600 more and was playing it yesterday ^^. Anyways, I want to draw the game the way it was ment to look, 8-bit and blocky, no standard pre made sprites if that makes sense. Also I've done all the "getting started" tutorials available and they didn't really help (except for teaching me gravity.x and y and how to make a circle follow me). So far I'm not sure if I'm even close to being right but what I have is:

---------code block----------
Function setup()
Px = Screenwidth/2
Py = screenheight/2 -- for the player starting in the center like the original

Ax = math.random
Ay = math.random -- asteroid start points

And I'm thinking I'll need delta.x and delta.y for calculating momentum?
---------end block---------

I can draw the sprites in codes sample creator but I'd rather have the game draw them so it all looks semi-authentic, plus I think the majority of spritey. Modern remakes look tacky and aren't my thing, sorry if it's a little vague or annoying but I'm trying to do a bunch of this before next fall before I start classes in Lua and C; plus I feel like porting over many classic games would simply just be fun, any help is appreciated...thanks!

wrmichael

Start with physics lab.. Watch how that code is done.

D4rk_Code

I am seeing how it is, but how would the physics lab be relavant to a 2600 re make? I shall study it as best I can nonetheless!

wrmichael

I wouldmthink The rules of physics apply to any game regardless of the cheesy graphics.

You could use the shape generator but fill in the shape with a color.

You want to handle collisions?

I believe I have asteroids on my iPad. I'll review and see what I can think of that might help.

D4rk_Code

Thanks! And I love those cheesy blocky graphics, shape generator? You mean like draw rect(10,20,20,80)? I guess I could, I'll have to figure out a good size. And collisions maybe; I'm looking more into if a rock hits me I die, and if the UFO hits anything it blows up and breaks an asteroid, just like the original.

wrmichael

I checked it out. It has been a long time.

Asteroids can touch each other, but collision with your ship has to be accounted for and your fire.

The Asteroids also loop from top to bottom. Not sure physics lab handles that.

Sounds like a fun challenge to recreate.

wrmichael

So what you want is a random asteroid generator to start....

Maybe you can creat a sprite to start and convert to code, then see how you can randomize the jagged edges and size?

D4rk_Code

Well I didn't know they looped, I thought it used a math.random (x,y) to spawn them, then just re drew them as they left the screen. But I suppose as long as I use predictable paths the loops will be the easiest part of all of this. The ship I'll need to figure out how to make the right size, and I'm thinking I'll make the UFO spawn random top right, or somewhere left of screen and follow the player by telling it ux(UFO x)=px(player x)+1 until ux=px..that's how it works in BASIC anyhow

wrmichael

My first astreoid:

Sprint to image from sprite editor

local img = image(8, 8)
img:set(1,4,0,255,0,255)
img:set(1,5,0,255,0,255)
img:set(1,6,0,255,0,255)
img:set(2,1,0,255,0,255)
img:set(2,2,0,255,0,255)
img:set(2,3,0,255,0,255)
img:set(2,4,0,255,0,255)
img:set(2,5,0,255,0,255)
img:set(2,6,0,255,0,255)
img:set(2,7,0,255,0,255)
img:set(3,1,0,255,0,255)
img:set(3,2,0,255,0,255)
img:set(3,3,0,255,0,255)
img:set(3,4,0,255,0,255)
img:set(3,5,0,255,0,255)
img:set(3,6,0,255,0,255)
img:set(3,7,0,255,0,255)
img:set(4,1,0,255,0,255)
img:set(4,2,0,255,0,255)
img:set(4,3,0,255,0,255)
img:set(4,4,0,255,0,255)
img:set(4,5,0,255,0,255)
img:set(4,6,0,255,0,255)
img:set(4,7,0,255,0,255)
img:set(5,1,0,255,0,255)
img:set(5,2,0,255,0,255)
img:set(5,3,0,255,0,255)
img:set(5,4,0,255,0,255)
img:set(5,5,0,255,0,255)
img:set(5,6,0,255,0,255)
img:set(5,7,0,255,0,255)
img:set(6,2,0,255,0,255)
img:set(6,3,0,255,0,255)
img:set(6,4,0,255,0,255)
img:set(6,5,0,255,0,255)
img:set(6,6,0,255,0,255)
img:set(6,7,0,255,0,255)
img:set(7,3,0,255,0,255)
img:set(7,4,0,255,0,255)
img:set(7,5,0,255,0,255)
img:set(7,6,0,255,0,255)
return img

D4rk_Code

And yes, a random asteroid generator, thanks for this idea! And yeah converting sprite to code sounds logical, or heck worst case I'll use sprites

wrmichael

Go get the Atari app, the games are free right now.

D4rk_Code

Goodness however did you come up with that?

D4rk_Code

Which app? And what games????

wrmichael

"atari's greatest hits"

The main app has arcade style. But on the bottom, one option gives you Atari 2600 games.

D4rk_Code

It's not free for any but missile command

wrmichael

I also got pitfall 2 from an activision app, but that was 2.99

wrmichael

I just downloaded asteroids for free. Are you sure your at the 2600 games?

wrmichael

On the bottom, click the Atari joystick.

D4rk_Code

I'm re-installing on my iPad right now so I'll find out in about 10 mins(my Internet sucks) but tell me if this make sense in code for player setup

Function setup()
Px = width/2
Py = height/2 --starts in center

Function draw()
TRIANGLE(25,25,30) --small triangle just like the 2600

wrmichael

Sure but I would create a class for the player
Them you can add things to the class that describe it

D4rk_Code

Classes just confuse me, especially the space war tutorial. I'll try it with classes if I can get the hang of how to use them properly

wrmichael

Triangles aren't an option. I think you need to create it with lines.

D4rk_Code

And yeah the Atari greatest hits won't let me have asteroids saying I have "insufficient credit"

wrmichael

Sorry. If I could send you the rom I would. Maybe when I purchased the activision games I got it too...

Here is how the example did the triangle:

translate(self.position.x, self.position.y)

    -- Draw our triangle invader
    -- 60 pixels high, 40 pixels wide
    line( 0, 30, 20, -30 )
    line( 0, 30,-20, -30 )
    line( -20, -30, 20, -30 )

wrmichael

Hope I don't get a 2.99 invoice for it...

D4rk_Code

I'm buying a $15 card soon and I'm getting activision anthology and the majority of atari's greatest hits. Also now how is that triangle 60 high and 40 wide if I'm seeing 30 and a -20?

D4rk_Code

I can't get those line segments you posted to draw in codea -_-

wrmichael

I took them from "bit invader" sample.
Anthology is what I purchased. ,wish it was the c64 versions.

I'll try to draw some lines for a ship and see what I get.

Classes are the way to go.

D4rk_Code

Alright, and I'm going to try and look into using maybe the ship mesh from space war on here if I can't get a line version. I'm trying to do a BASIC version and a Lua version since the languages are similar; also thanks for offering help!

wrmichael

Try

-- asteroids

-- Use this function to perform your initial setup
function setup()
    print("Hello World!")
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)

    -- This sets the line thickness
    strokeWidth(5)
    translate(HEIGHT/2,WIDTH/2)

    -- Draw our triangle invader
    -- 60 pixels high, 40 pixels wide
    line( 0, 30, 20, -30 )
    line( 0, 30,-20, -30 )
    line( -20, -30, 20, -30 )

    -- Do your drawing here
    
end

wrmichael

Translate sees to change your "starting point" and then the lines draw.

wrmichael

What basic app are you using? IvBasic or Basic!

D4rk_Code

Never heard of Ivbasic..I'm using misoft BASIC!, love it a lot

D4rk_Code

Nice ship, I shrunk it by half values to get a better size, I'm thinking of maybe using x and y= touch.x and y to drag the ship around as virtual buttons and tilt are a bit iffy

wrmichael

I have basic! Too. I like Codea more but it is nice.

D4rk_Code

If you use basic!, you should post some on the forums for it . I'm working on simple animations in basic! Just for the heck of it, I thought basic! Was easier, but Codea grows quickly in me...especially since its CPU calc is faster than basic! And don't slow down as much

wrmichael

Basic! Is nice but lua is more modern..

D4rk_Code

Indeed, I'm going to read and re read the physics lab to make some asteroid polygons, I'm also playing on my Atari 2600 for asteroids! I'll post more as I accomplish things

wrmichael

I'd be glad to give you any advise you I can, but I am no expert with codea or lua.
I played with rotate some. Might need to see how it affects multiple objects.

wrmichael

Before you rotate your ship, you push matrix and then when done, popmatrix. This is how you keep everything from rotating I think....

Reefwing

.@D4rk_Code - Asteroids is a good beginner project. I would suggest you use meshes for the graphics.

I will be extending my SpaceWar! game tutorial with physics at some stage so the ships are attracted toward the sun in the centre of the screen.

In the meantime, if you want to look at another Asteroids version check out @juaxix's version at: http://twolivesleft.com/Codea/Talk/discussion/114/asteroides-source-code#Item_21

D4rk_Code

I tried this version, and to be honest I don't like it; controls horrendously for me..now the Spacewar! game, I like the tutorials so far, though they have all confused me to death, I believe I might use your triangle ship mesh for the ships if I can't get the one that wrmichael drew me to animate, in the mean time I'm also working on an Enduro port for the Casio Prizm With permission of course hahha!

Reefwing

Hi @D4rk_Code - sorry the tutorials are confusing, that is obviously not the intent! I sometimes forget the level of assumed knowledge required.

Is there a particular bit which I need to expand on? If you are having trouble understanding then other people probably are as well.

D4rk_Code

Oh well I have a minimal level of understanding, but I guess I don't fully understand how what you're doing works

D4rk_Code

Also, I"m super bogged down at college so Developing this asteroids will be slowish, help is welcomed, and hopefully a link with the code will be available soon (week or 2)

wrmichael

I have been playing. I have a ship, two buttons. No throttle or firing yet.. Just spinning

Button = class()

-- Fast Mesh Button Class courtesy of @Vega
-- 3 Aug 2012
--
-- Modified: - Call Back Functionality added
--           - pushStyle() & popStyle() added to draw()
--           - tapped status added
--           - pointInRect() function added
--           - changed vec2 location to x and y (to reduce typing!)
--
-- Version 1.3 (4 Aug 2012)

function Button:init(text,x,y,width,height)
    self.state = "normal"
    self.text = text
    self.textColor = color(255,255,255,192)
    self.x = x
    self.y = y
    self.width = width
    self.height = height
    self.visible = true
    self.fontSize = 28
    self.font = "ArialRoundedMTBold"
    self.color1 = color(255, 255, 255, 96)
    self.color2 = color(128,128,128,32)
    self.presscolor1 = color(192, 224, 224, 128)
    self.presscolor2 = color(96, 192, 224, 128)
    self.verts = self:createVerts(self.width, self.height)
    self.myMesh = mesh()
    self.myMesh.vertices = triangulate(self.verts)
    self.vertColor = {}
    self:recolor()
    self.action = nil
    self.tapped = false
    self.actionpress= false
    self.istouched = false
end

function Button:setColors(c1,c2,p1,p2)
    self.color1 = c1
    self.color2 = c2
    self.presscolor1 = p1
    self.presscolor2 = p2
    self:recolor()
end

function Button:textOptions(fn, sz, col)
    self.font = fn
    self.fontSize = sz
    self.textColor = col
end

function Button:draw()
    if self.visible == true then
        pushStyle()
        pushMatrix()
        translate(self.x,self.y)
        self.myMesh:draw()
        fill(self.textColor)
        fontSize(self.fontSize)
        font(self.font)
        text(self.text, self.width/2,self.height/2)
        self:drawLines(self.verts)
        popMatrix()
        popStyle()
        if self.istouched then
            if self.actionpress then
                if self.action then
                    self.action()
                end
            end
        end
    end
end

function Button:touched(touch)
    self.tapped = false
    if self.visible then  
        if pointInRect(touch.x, touch.y, self.x, self.y, self.width, self.height) then
            if touch.state == BEGAN then
                self.tapped = true
                self.state = "pressing"
                self:recolor()
                self.istouched = true
                
            elseif touch.state == ENDED then
                if self.state == "pressing" then
                    self.state = "normal"
                    self.tapped = true
                    self:recolor()
                    
                end
                if self.actionpress == false then
                    if self.action then
                        self.action()
                        actiontook = true
                    end
                end
                self.istouched = false
            end
        else
            self.state = "normal"
            self:recolor()
        end
        
    end
    if touch.state == ENDED then
        self.istouched = false
    end
    
end

function Button:createVerts(w,h)
    local r
    local v = {}
    if w > 100 or h > 100 then
        if w>=h then r = math.round(h/100) else r = math.round(w/100) end
    else
        r = 1
    end
    v[1] = vec2(w,6*r)
    v[2] = vec2(w-r,4*r)
    v[3] = vec2(w-2*r,2*r)
    v[4] = vec2(w-4*r,r)
    v[5] = vec2(w-6*r,0)
    v[6] = vec2(6*r,0)
    v[7] = vec2(4*r,r)
    v[8] = vec2(2*r,2*r)
    v[9] = vec2(r,4*r)
    v[10] = vec2(0,6*r)
    v[11] = vec2(0,h-6*r)
    v[12] = vec2(r,h-4*r)
    v[13] = vec2(2*r,h-2*r)
    v[14] = vec2(4*r,h-r)
    v[15] = vec2(6*r,h)
    v[16] = vec2(w-6*r,h)
    v[17] = vec2(w-4*r,h-r)
    v[18] = vec2(w-2*r,h-2*r)
    v[19] = vec2(w-r,h-4*r)
    v[20] = vec2(w,h-6*r)
    return v
end

function Button:drawLines(v)
    noSmooth()
    strokeWidth(1)
    stroke(0, 0, 0, 192)
    for i=1, #v-1 do
        line(v[i].x,v[i].y,v[i+1].x,v[i+1].y)
    end
    line(v[#v].x,v[#v].y,v[1].x,v[1].y)   
end

function Button:recolor()
    local lt, dk
    if self.state == "normal" then 
        lt = self.color1
        dk = self.color2
    else
        lt = self.presscolor1
        dk = self.presscolor2
    end
    for i=1,3 * #self.verts - 6 do
        if self.myMesh.vertices[i].y > self.height/2 then
            self.vertColor[i] = lt
        else
            self.vertColor[i] = dk
        end
    end
    self.myMesh.colors = self.vertColor
end

-- Math Utilities

function math.round(value)   
    -- math.round function courtesy of Vega.   
    return math.floor(value + 0.5)
    
end

function pointInRect(pointX, pointY, x, y, w, h)
    
    -- Returns true if point (pointX, pointY) is within the rectangle
    -- with lower left corner at (x, y) with a width of w and a
    -- height of h.
    --
    -- Reefwing Software (www.reefwing.com.au)
    -- Version 1.0
    
    if pointX >= x and pointX <= x + w and pointY >= y and pointY <= y + h then
        return true
    else
        return false
    end
    
end

-- main asteroids
shipr =0
-- Use this function to perform your initial setup
function rotateleft()
    shipr = shipr + 10
    if shipr >= 360 then
        shipr = 0
    end
end

function rotateright()
    shipr = shipr - 10
    if shipr <= 0 then
        shipr = 360
    end
end


function setup()
 --   print("Hello World!")
    x = 10
    as = Asteroids()
    
local shipr =0
btn = Button("<=",100,100,100,50)
btn.action = function ()
        --shipr = shipr +10
        rotateleft()
       -- print(shipr)
    end

btn.actionpress = true

btn2 = Button("=>",300,100,100,50)
btn2.action = function ()
        --shipr = shipr +10
        rotateright()
       -- print(shipr)
    end

btn2.actionpress = true

cs = {}
table.insert(cs,btn)
table.insert(cs,btn2)

table.insert(cs,as)

end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)

    -- This sets the line thickness
    strokeWidth(5)
    
    pushMatrix()
    translate(HEIGHT/2,WIDTH/2)
    -- Draw our triangle invader
    -- 60 pixels high, 40 pixels wide
  --  print("sr:"..shipr)
    rotate(shipr)
    line( 0, 30, 20, -30 )
    line( 0, 30,-20, -30 )
    line( -20, -30, 20, -30 )
    x = x + 10
    -- Do your drawing here
    popMatrix()
  -- sprite(img,200,200,50,50)
    
    for a,control in pairs(cs) do
        control:draw()
    end
    
end
function touched(touch)  
    for a,control in pairs(cs) do
        control:touched(touch)
    end
   
end

wrmichael

Asteroids = class()

function Asteroids:init()
    -- you can accept and set parameters here
    self.x = 600
    self.y = 50
    self.w = 50
    self.h = 50
    
   img = image(8, 8)
img:set(1,4,0,255,0,255)
img:set(1,5,0,255,0,255)
img:set(1,6,0,255,0,255)
img:set(2,1,0,255,0,255)
img:set(2,2,0,255,0,255)
img:set(2,3,0,255,0,255)
img:set(2,4,0,255,0,255)
img:set(2,5,0,255,0,255)
img:set(2,6,0,255,0,255)
img:set(2,7,0,255,0,255)
img:set(3,1,0,255,0,255)
img:set(3,2,0,255,0,255)
img:set(3,3,0,255,0,255)
img:set(3,4,0,255,0,255)
img:set(3,5,0,255,0,255)
img:set(3,6,0,255,0,255)
img:set(3,7,0,255,0,255)
img:set(4,1,0,255,0,255)
img:set(4,2,0,255,0,255)
img:set(4,3,0,255,0,255)
img:set(4,4,0,255,0,255)
img:set(4,5,0,255,0,255)
img:set(4,6,0,255,0,255)
img:set(4,7,0,255,0,255)
img:set(5,1,0,255,0,255)
img:set(5,2,0,255,0,255)
img:set(5,3,0,255,0,255)
img:set(5,4,0,255,0,255)
img:set(5,5,0,255,0,255)
img:set(5,6,0,255,0,255)
img:set(5,7,0,255,0,255)
img:set(6,2,0,255,0,255)
img:set(6,3,0,255,0,255)
img:set(6,4,0,255,0,255)
img:set(6,5,0,255,0,255)
img:set(6,6,0,255,0,255)
img:set(6,7,0,255,0,255)
img:set(7,3,0,255,0,255)
img:set(7,4,0,255,0,255)
img:set(7,5,0,255,0,255)
img:set(7,6,0,255,0,255)

    self.mysprite = img
    
end

function Asteroids:draw()
    -- Codea does not automatically call this method
    sprite(self.mysprite,self.x,self.y)
end

function Asteroids:touched(touch)
    -- Codea does not automatically call this method
end

D4rk_Code

Thanks! The button class is telling me it expects a table and gets a nil value so it's broke, I'll keep the asteroids one! I'm looking into physics today, as I got a day off school

wrmichael

does the button class give you a line the error is on? it should work.. I can rotate left and right in my little app.

I have each class in its own code window. I merged them together for simplicity of cut and paste.

D4rk_Code

Hello World!
error: error: [string "Button = class()..."]:277: bad argument #1 to 'pairs' (table expected, got nil)

Pausing playback

wrmichael

At -- main is where the main program is. Maybe but the button class into its own code window?