Log In  
Log In  

@ShootingStar

Follow
Follow
RPG tiles [shooting★] (w/sprites)
by ShootingStar

So I've started working on a pico8 U.I today. I'll be re-installing linux (switching to fedora) soon so I'm not only using this post as a backup, but also using this post as a sort of preview of things to come.

I wouldn't bother using this just yet, though. Its quite un-optimized so far and not yet finished, and its also not documented and the sample code used for the gif I generated was a bit sloppily thrown together, but if you want to take the code and tweak it to your own needs then by all means do so.
running code:

--s★ui
--shooting★

function s★ui_init()
    s★ui={frame={},mse={0,0}}
    --configure here
        --[1]=bg, [2]=border,
        --[3]=content color
        --[4] = scrollbar back color
        --[5] = scrollbar btn color
        --[6] = scrollbar btn hover
        --      color
        --[7] = content btn bg color
        --[8] = content btn border
        --      color
        --[9] = content btn fg color
        --[10]= content btn bg hover
        --[11]= content btn border
        --      hover
        --[12]= content btn text
        --      hover
    s★ui_wincol={
    6, --1
    5, --2
    1, --3
    1, --4
    6, --5
    9, --6
    2, --7
    1, --8
    6, --9
    1, --10
    8, --11
    6 --12
    }

    --mouse icon
    s★ui_msei = 1

    --content padding
    s★ui_padding=2

    --enable mouse
    poke(0x5f2d, 1)
end

--ui update function
function s★ui_upd()
    --ui mouse coords
    s★ui.mse[1] = stat(32)
    s★ui.mse[2] = stat(33)

    for i=1,#s★ui.frame do
        --draw the frame
        s★ui.frame[i].draw()
    end
    --draw mouse sprite
    spr(s★ui_msei, s★ui.mse[1], s★ui.mse[2])
end

--create a new frame
function s★ui_new(d)
    d = d or {}
    --frame can have custom cols,
    --bg,border and content
    d.bg=d.bg or s★ui_wincol[1]
    d.bdr=d.bdr or s★ui_wincol[2]
    d.cnt=d.cnt or s★ui_wincol[3]
    d.elm={}
    d.cs=0
    d.highest_cnt=0
    --close button, left as object
    --might add more btns later~
    d.btns={
        {
            title='x',
            x=117,
            y=2
        }
    }

    --if disabled close
    if d.dc == true then d.btns[1].disabled = true end
    --else, create close action
    d.btns[1].action=function()
    d.active=false
 end
 d.btns[1].draw=function()
    local col=5
    if s★ui.mse[1] > d.btns[1].x and s★ui.mse[1] < d.btns[1].x + 8 and s★ui.mse[2] > d.btns[1].y and s★ui.mse[2] < d.btns[1].y + 8 and d.dc != true then
        col=1
        if stat(34) == 1 then
            d.btns[1].action()
        end
    end
    print(d.btns[1].title, d.btns[1].x+3, d.btns[1].y, col)
 end
    d.active=true
    d.draw=function()
        if d.active == false then return end
        cls(d.bg)

        for i=1, #d.elm do
            d.elm[i].draw()
        end
        rect(2, 8, 125, 125, d.bdr)
        rectfill(0, 0, 127, 7, d.bg)
        rectfill(0, 126, 127, 127, d.bg)
        for i=1, #d.btns do
            d.btns[i].draw()
        end
        print(d.title, 2, 2, d.cnt)

        rectfill(116, 111, 124, 124, s★ui_wincol[4])
        local mainsc=s★ui_wincol[5]
        local hovcol={mainsc,mainsc}

        if s★ui.mse[1] > 116 and s★ui.mse[1]<124 and s★ui.mse[2]>112 and s★ui.mse[2]<118 then
            hovcol[1] = s★ui_wincol[6]
            if stat(34) == 1 then
                d.cs-=3
                d.cs=max(d.cs, 0)
            end
        end
        if s★ui.mse[1] > 116 and s★ui.mse[1]<124 and s★ui.mse[2]>118 and s★ui.mse[2]<124 then
            hovcol[2] = s★ui_wincol[6]
            if stat(34) == 1 then
                d.cs+=3
            end
        end
        print('⬆️',117, 112, hovcol[1])
        print('⬇️',117, 119, hovcol[2])
        rectfill(3, 118, 116, 124, 1)
         print(':'..d.cs/3, 4, 119, 6)
    end
    add(s★ui.frame, d)
    return s★ui.frame[#s★ui.frame]
end

--new element
function s★ui_newelem(f, d)
    d.type = d.type or 'text'
    d.clicked=0
    d.draw=function()
    local cy=d.y+8+s★ui_padding-f.cs
    local cx=d.x+2+s★ui_padding
        if d.type == 'text' then
            print(d.txt, cx, cy, d.col or f.cnt)
        end

        if d.type == 'hr' then
            line(4, cy, 123, cy, d.col or f.cnt)
        end

        if d.type == 'btn' then
            local cols={s★ui_wincol[7], s★ui_wincol[8], s★ui_wincol[9]}

            if s★ui.mse[1] >= cx and s★ui.mse[1] <= cx+(#d.txt*4)+2 and s★ui.mse[2] >= cy and s★ui.mse[2] <= cy+8 then
                cols={s★ui_wincol[10], s★ui_wincol[11], s★ui_wincol[12]}
                if stat(34) == 1 then
                    d.clicked+=1
                    if d.clicked==1 then
                        d.act()
                    end
                else
                    d.clicked=0
                end
            end
            d.clicked=stat(34)
            rectfill(cx, cy, cx+(#d.txt*4)+2, cy+8, cols[1])
            rect(cx, cy, cx+(#d.txt*4)+2, cy+8, cols[2])
            print(d.txt, cx+2, cy+2, cols[3])
        end

        if d.type == 'chk' then
            d.checked = d.checked or false
            print(d.txt, cx+8, cy+1, d.col or f.cnt)
            if s★ui.mse[1] >= cx and s★ui.mse[1] <= cx+(#d.txt*4)+6 and s★ui.mse[2] >= cy and s★ui.mse[2] <= cy+6 then
                cols={s★ui_wincol[10], s★ui_wincol[11], s★ui_wincol[12]}
                if stat(34) == 1 then
                    d.clicked+=1
                    if d.clicked==1 then
                        d.checked = not d.checked
                    end
                else
                    d.clicked=0
                end
            end
            d.clicked=stat(34)
            rect(cx, cy, cx+6, cy+6, d.col or f.cnt)
            if d.checked==true then
                line(cx+1, cy+3, cx+2, cy+6, d.col or f.cnt)
            line(cx+2, cy+6, cx+5, cy, d.col or f.cnt)
            end
        end
    end
    add(f.elm, d)
    return f.elm[#f.elm]
end

sample code used in gif above:

function _init()
    s★ui_init()

    wnd_main = s★ui_new({
        title='pico8-ui',
        dc=true
    })
    --wnd_main content
    s★ui_newelem(wnd_main, {
    x=0,
    y=0,
    txt='welcome to the pico-8 ui\ndemo!\n\nlicense:\nthis doesn\'t actually have\none, but i thought it would\nlook kinda cool to have\nsome kind of massive text\nwall here for this demo,\nso here it is. please use the\nbuttons on the bottom right\nhand corner to scroll this\npage!'})

    s★ui_newelem(wnd_main, {
    x=0,
    y=112,
    txt=[[oh, neat. you scrolled!
now that you have scrolled,
how about we get a little
more into it? if you want to
use this neat u.i, then be
prepared because it takes
929 tokens. however, as
you can tell its a fully
functional u.i system with
the ability to scroll content
and create buttons, checkboxes
and horizontal rules.

here's a sample setup!

function _init()
 s★ui_init()

 --setup main window
 wnd_main = s★ui_new({
        title='pico8-ui',
        dc=true --disable close
    })

    s★ui_newelem(wnd_main, {
    x=0,
    y=0,
    txt='this is some text'
 })

 wnd_checkbox = s★ui_newelem(
 wnd_main, {
    type='chk',
    x=80,
    y=86,
    txt='checkbox'
    })
end
]]})

    s★ui_newelem(wnd_main, {
    type='hr',
    x=0,
    y=13
    })

    --accept button
    s★ui_newelem(wnd_main, {
    type='btn',
    y=86,
    x=0,
    txt='i accept',
    act=function()
        sfx(0)
        if wnd_checkbox.checked == true then
            wnd_main.active=false
        end
    end
    })

    --fix close button
    s★ui_newelem(wnd_main, {
    type='btn',
    y=96,
    x=0,
    txt='enable win close',
    act=function()
        sfx(1)
        wnd_main.dc = false
    end
    })

    s★ui_newelem(wnd_main, {
    type='hr',
    x=0,
    y=106,
    col=13
    })

    wnd_checkbox = s★ui_newelem(wnd_main, {
    type='chk',
    x=80,
    y=86,
    txt='checkbox'
    })

 --end
end

function _draw()
    cls()
    s★ui_upd()
end
P#61854 2019-02-13 19:35 ( Edited 2019-02-13 20:59)

154 tokens

Still being somewhat new to pico8, I managed to make this neat water reflect effect.

I'm sure it can be optimized a great deal, but for now its the best I can come up with, though I'm always improving.

--s★_tool -> rflc

--[[
    configuring
    to configure this tool,
    in your _init() or when ever
    you see a need to change 
    the waters settings, you can
    use this code 

     ◆ s★_rf_sy = 105

    the sample code above
    sets the start-y position of
    the water. 

     ◆ s★_rf_data = value

    data: 
        ◆ sy - start y
     ◆ bg - background color
     ◆ ic - ignore color (for cls
             background colors so it
             doesn't draw a color that
             it doesn't need to.

             if you're using cls(1) then
             set ic to 1, for example.)
     ◆ rq - reflection quality
     ◆ wa - wave amp (how large 
             it waves left/right)
     ◆ ws - wave speed (how fast
             it waves left/right)

]]--
--defaults

s★_rf_sy=104
s★_rf_bg=1
s★_rf_ic=0
s★_rf_rq=13
s★_rf_wa=2
s★_rf_ws=0.02
--wave value, don't mod this
--unless you need to.
s★_rf_wv=0

--reflection effects
s★_rflc = function(mode, data, val)
        --if not configuring, then draw

        rectfill(0, s★_rf_sy, 127, 127, s★_rf_bg)
        local _scl=(s★_rf_rq/127)
        local _ht=127-s★_rf_sy
     local _flc_col = 0

        for i=0,s★_rf_rq do
            for j=0, _ht do

                local _x=((i/s★_rf_rq)*127)+(cos(s★_rf_wv+(j/6))*(s★_rf_wa+j/8))
                local _s=(s★_rf_rq/128)*10
                local c=pget(_x,s★_rf_sy-j)
                if c!= s★_rf_bg and c!= s★_rf_ic and c != 0 then
                local _y=(j/2)
        line(_x-_s-_y-j/14, 1+j+s★_rf_sy, _x+_s+_y+j/14, j+s★_rf_sy, c)
    end
            end
        end
    s★_rf_wv+=s★_rf_ws
end

to use this, just put this code in your draw code under everything you want to reflect.s★_rflc()

compressed code:

s★_rf_sy=104
s★_rf_bg=1
s★_rf_ic=0
s★_rf_rq=13
s★_rf_wa=2
s★_rf_ws=0.02
s★_rf_wv=0
s★_rflc = function(mode, data, val) rectfill(0, s★_rf_sy, 127, 127, s★_rf_bg) local _scl=(s★_rf_rq/127) local _ht=127-s★_rf_sy local _flc_col = 0 for i=0,s★_rf_rq do for j=0, _ht do local _x=((i/s★_rf_rq)*127)+(cos(s★_rf_wv+(j/6))*(s★_rf_wa+j/8)) local _s=(s★_rf_rq/128)*10 local c=pget(_x,s★_rf_sy-j) if c!= s★_rf_bg and c!= s★_rf_ic and c != 0 then local _y=(j/2) line(_x-_s-_y-j/14, 1+j+s★_rf_sy, _x+_s+_y+j/14, j+s★_rf_sy, c) end end end s★_rf_wv+=s★_rf_ws end
P#61761 2019-02-11 14:03

Hi, everyone. I made a very simplistic scene manager for you all to use, its somewhat compressed as well. here's an example:

Cart [#scenemanager_sample-0#] | Code | 2019-02-03 | No License | Embed

Basically, this scene manager allows you to create init, update and draw for each scene (as well as anything else you want to cook up, of course).

HOW TO USE
to make a new scene, use the command 'nscn' inside of your init function. for example: nscn({init=function() end, update=function() end, draw=function() end})

to grab the current scene thats running so you can modify it or its variables, you can simply create a local variable called 'self'.

local this=scn['self']()

(or local this=scn.self())

to switch to a scene, you'll need to comment the ID of that scene so you don't lose track. I recommend you have a function that launches at the init() of your game that creates all of your scenes for you.

command to load a scene: scn_mng.go(id) where id is the scene number you want to run.

Finally, you need to put the 2 commands inside draw() and update(). in update(), put scn_mng.update() and in draw put scn_mng.draw()

code snippit:

--scene manager
--shooting★
scn = {self=function() return scn[scn_mng.r] end} scn_mng = { go=function(s) scn_mng.r = s scn[s].init() end, draw=function() scn[scn_mng.r].draw() end, update=function() scn[scn_mng.r].update() end } function nscn(d) local a={ init=d.init or function() end, update=d.update or function() end, draw=d.draw or function() end } add(scn, a) end

code example (used in cart above)

--sample

function create_scenes()
    --scene 1
    nscn({
        init=function()
            --create a local var called
            --this and set it to self
            --scene
            local this=scn['self']()

            --create particles
            this.particles = {}
            for i=0,16 do
                local a={rnd(127),rnd(127),rnd(2)}
                add(this.particles, a)
            end

            --create a timer to switch
            --to scene 2 with
            this.timer=0
        end,

        update=function()
            --create a local var called
            --this and set it to self
            --scene
            local this=scn['self']()

            this.timer+=1

            if this.timer==120 then
                this.timer=0
                --switch to scene 2
                scn_mng.go(2)
            end
        end,

        draw=function()
         --create a local var called
            --this and set it to self
            --scene
            local this=scn['self']()

            --draw particles
            for i=1,#this.particles do
                pset(this.particles[i][1],
                     this.particles[i][2],
                     7)
            this.particles[i][1]+=this.particles[i][3]
            this.particles[i][2]+=this.particles[i][3]
            end
        end
    })

    --scene 2
    nscn({
        init=function()
            --create a local var called
            --this and set it to self
            --scene
            local this=scn['self']()

            this.timer=0
        end,

        update=function()
            --create a local var called
            --this and set it to self
            --scene
            local this=scn['self']()

            this.timer+=1

            if this.timer==120 then
                this.timer=0
                --switch back to scene 1
                scn_mng.go(1)
            end
        end,

        draw=function()
            cls(1)
        end
    })
end

function _init()
    --create scenes
    create_scenes()
    scn_mng.go(1)
end

function _update()
    scn_mng.update()
end

function _draw()
    cls()
    scn_mng.draw()
    print('running scene '..scn_mng.r, 0, 0, 7)
end
P#61476 2019-02-03 02:34

this nifty code lets you debug your project. Features it provides are in the codes guide on how to use it~

Cart [#superdebug-0#] | Code | 2019-01-31 | No License | Embed
1

--super debug v 1.0
--shooting★

--[[
…………………………………………
      how-to use
…………………………………………
to use this code, check out tab
2 and copy the compressed code.
once its coppied, you'll need
to put "sdbg()" (without
quotes) inside of your
_draw() function, at the very
bottom. make sure its drawn
last.

by default, the key to display
debug info is the tilde key (
the ` next to the number 1 on
standard u.s keyboards). you
can change this by simply
changing dbg_dbtn. at your init,
you can put dbg_dbtn = 't' for
example, and then 't' on your
keyboard will open the debug
info.

if you want to adjust the
memory location, you can adjust
the variable called addr.
by default, its 0x5e00. to edit
it, do the same as editing
dbg_dbtn, just put it in
_init(). ( addr = 0x5e01 )
…………………………………………
      ★features★
…………………………………………
this code displays the following
information:
 ◆ framerate
                (top-right)
  ………
 ◆ cpu usage
  ………
 ◆ mem usage/max mem
  ………
 ◆ test count
                (how many times
        you tested your project
        since installing this code)
  ………
 ◆ mouse info
                (location, click
        #)
  ………
 ◆ tile flags & id
                (displays all 8 flags on the tile
        you're hovering over)
  ………
 ◆ color of hovering-pixel
                (gets the color of the
                pixel you're currently
                hovering the mouse over.)
  ………
 ◆pico version
     ………
 ◆ uptime
     (how long the test has
     been running for)
  ………
]]

Alternatively, you can copy the compressed code directly and just follow instructions from the code displayed above. here's the compressed code that makes the entire thing run.

--code
dbg_dbtn = '`' dbt = 7 don = false cc = 8 mc = 15 addr = 0x5e00 function dtxt(txt,x,y,c) print(txt, x,y+1,1) print(txt,x,y,c) end function init_dbg() poke(0x5f2d, 1) test_num = peek(∧addr) or 0 poke(∧addr, test_num+1) end dbtm = 0 dbu = {0,0,0} function sdbg() if stat(31) == dbg_dbtn then if don==false then don=true else don=false end end if don != true then return end local c=dbt local cpu=stat(1)*100 local mem=(stat(0)/100)/10*32 local fps=stat(7) local u=stat(7)..'' local _x=124-(#u*4) local du = {dbu[1],dbu[2],dbu[3]} dtxt(u, 124-(#u*4), 1, c) u=cpu..'%' dtxt(u, 124-(#u*4), 7, c) u=mem..'kb /' dtxt(u, 124-(#u*4)-32, 13, c) dtxt('31.25kib', 128-33, 13, c) dtxt(du[3]..'h', 124-44, 128-9, c) dtxt(du[2]..'m', 124-28, 128-9, c) dtxt(du[1] ..'s', 124-12, 128-9, c) dtxt('cpu', 1, 7, c) dtxt('mem', 1, 13, c) dtxt('pico-'..stat(5), 1, 128-15, c) dtxt('uptime', 1, 128-9, c) dbtm+=1 dbu[1] = flr(dbtm/stat(8)) dbu[2] = flr(dbu[1]/60) dbu[3] = flr(dbu[2]/60) dtxt('test number: '..peek(0x5e00), 0, 24, c) dtxt('mouse: {'..stat(32)..','..stat(33)..'}\nbitmask: '..stat(34), 0, 30, c) draw_dbg_info(c) end function draw_dbg_info(c) local m = {stat(32)/8, stat(33)/8} local tile=fget(mget(m[0],m[1]), 0) dtxt('tile flags', 0, 6*8, c) local res = {} res[1] = fget(mget(m[1],m[2]), 0) res[2] = fget(mget(m[1],m[2]), 1) res[3] = fget(mget(m[1],m[2]), 2) res[4] = fget(mget(m[1],m[2]), 3) res[5] = fget(mget(m[1],m[2]), 4) res[6] = fget(mget(m[1],m[2]), 5) res[7] = fget(mget(m[1],m[2]), 6) res[8] = fget(mget(m[1],m[2]), 7) dtxt('{'.. blton(res[1]) ..','..blton(res[2]) ..','..blton(res[3]) ..','..blton(res[4]) ..'\n '..blton(res[5]) ..','..blton(res[6]) ..','..blton(res[7]) ..','..blton(res[8]) ..'}\ntile-id: '..mget(m[1],m[2]), 0, 6*9, c) print('color: '..pget(m[1]*8,m[2]*8), 0, 6*12, max(pget(m[1]*8,m[2]*8), 1)) circ(stat(32), stat(33), 3, c) circfill(stat(32), stat(33),1, c) end function blton(v) return v and 1 or 0 end
P#61379 2019-01-31 03:43 ( Edited 2019-01-31 03:45)

Hey, everyone! Here's some RPG tiles for your project. It includes some sprites, too.

You can copy the image data by clicking the 128x32 link text.

Screenshots:

image data [TAB 1]
[128x32]

image data [TAB 2]
[128x32]

image data [TAB 3]
[128x32]

image data [TAB 4]
[72x32]

P#61251 2019-01-27 02:01

Hi, everybody! I'm a new user to this Pico-8 thing but I'm already a big fan of it. I'm having a lot of fun designing things, so here you go~ I may post more tilesets in the future.

Cart [#wguhogib-0#] | Code | 2019-01-27 | No License | Embed

DL the cart to use the tiles

Alternatively, you can copy the tile data directly. click 128x32 next to the image to copy the data
[128x32]

P#61247 2019-01-27 01:18 ( Edited 2019-01-27 01:54)

X
About | Contact | Updates | Terms of Use
Follow Lexaloffle:        
Generated 2019-02-17 06:55 | 0.067s | 4194k | Q:55