制作一款打飛機游戲27：精靈編輯器UI

繼續開發我們的編輯器——Sprit Edit。我們已經創建了這個小編輯器，它可以顯示很多精靈（sprites），并且我們可以遍歷所有精靈。這真的很棒，我們可以創建新的精靈，這也不錯。但是，唉，我們目前還不能編輯單個精靈。這就是我們要做的事情——創建一個用戶界面（UI）來編輯單個精靈。

編輯器的設計理念

這次，我的想法是，當你跳轉到一個精靈時，我想看到精靈的所有值，并且能夠單獨編輯每個值。這有點像垂直布局，而不是水平布局，因為水平布局最終會因為空間不足而顯得混亂，特別是當數字很長時。而且，我認為重要的是，當你編輯時，你應該能看到你正在編輯的內容，這樣才有即時的反饋。

實現過程

首先，我們要在頂部菜單添加一個項目，顯示當前正在編輯的精靈的名稱。然后，我們要列出當前精靈的所有值。我們需要至少顯示八個值，并且要檢查是否有nil值。

接下來，我們要為每個值添加一個文本框，并在文本框后顯示對應的標簽（如X、Y、高度等），以便用戶知道每個值代表什么。

遇到的問題與解決

在開發過程中，我遇到了一些問題。例如，當我在不同模式之間切換時，程序有時會崩潰。原因是我在切換模式后沒有刷新界面。我通過添加刷新函數解決了這個問題。

另一個問題是，當編輯nil值時，我想在文本框中顯示一個空字符串，而不是nil。這需要我在獲取數據時做一些額外的檢查。

后續計劃

現在，我們的編輯器已經可以基本工作了，但還有一些小細節需要調整。例如，我們還需要添加刪除精靈的功能，以及處理一些可能導致程序崩潰的邊界情況（如設置下一個精靈為當前精靈時導致的無限循環）。

我希望大家能發揮自己的創造力，思考如何設計自己的UI，并嘗試實現這些功能。

pico-8 cartridge // http://www.pico-8.com
version 41
__lua__
function _init()--- customize here ---#include shmup_myspr.txtfile="shmup_myspr.txt"arrname="myspr"data=mysprreload(0x0,0x0,0x2000,"cowshmup.p8")----------------------debug={}msg={}_drw=draw_list_upd=update_listmenuitem(1,"export",export)curx=1cury=1scrolly=0scrollx=0poke(0x5f2d, 1)
endfunction _draw()_drw()if #msg>0 thenbgprint(msg[1].txt,64-#msg[1].txt*2,80,14)msg[1].t-=1if msg[1].t<=0 thendeli(msg,1)end  end-- debug --cursor(4,4)color(8)for txt in all(debug) doprint(txt)end
endfunction _update60()dokeys()mscroll=stat(36)_upd()
endfunction dokeys()if stat(30) thenkey=stat(31)if key=="p" thenpoke(0x5f30,1)endelsekey=nilendend
-->8
--draw
function draw_edit()-- backgroundfillp(0b11001100001100111100110000110011)rectfill(0,0,127,127,33)fillp(?)line(63,0,63,127,13)line(0,63,127,63,13)fillp()draw_menu()-- draw spriteif selspr thenmspr(selspr,63,63)end-- blinking dotif (time()*2)%1<0.5 thenpset(63,63,rnd({8,13,7,15}))end
endfunction draw_list()fillp(0b11001100001100111100110000110011)rectfill(0,0,127,127,33)fillp(?)line(63,0,63,127,13)line(0,63,127,63,13)fillp()draw_menu()if (time()*2)%1<0.5 thenpset(63,63,rnd({8,13,7,15}))end
endfunction draw_table()cls(2)draw_menu()
endfunction draw_menu()--spr(0,0,0,16,16)if menu thenfor i=1,#menu dofor j=1,#menu[i] dolocal mymnu=menu[i][j]local c=mymnu.c or 13if i==cury and j==curx thenc=7if _upd==upd_type thenc=0endendbgprint(mymnu.w,mymnu.x+scrollx,mymnu.y+scrolly,13)   bgprint(mymnu.txt,mymnu.x+scrollx,mymnu.y+scrolly,c) endendendif _upd==upd_type thenlocal mymnu=menu[cury][curx]local txt_bef=sub(typetxt,1,typecur-1)local txt_cur=sub(typetxt,typecur,typecur)local txt_aft=sub(typetxt,typecur+1)txt_cur=txt_cur=="" and " " or txt_cur if (time()*2)%1<0.5 thentxt_cur="\^i"..txt_cur.."\^-i"endlocal txt=txt_bef..txt_cur..txt_aftbgprint(txt,mymnu.x+scrollx,mymnu.y+scrolly,7)endend-->8
--update
function update_edit()refresh_edit()if btnp(??) thencury-=1endif btnp(??) thencury+=1endcury=(cury-1)%#menu+1cury-=mscrollcury=mid(1,cury,#menu)if cury==1 thencurx=1if btnp(??) thenselspr-=1elseif btnp(??) thenselspr+=1endselspr=mid(1,selspr,#data)	elsecurx=2endif btnp(🅾?) then_drw=draw_list_upd=update_listrefresh_list()cury=selsprcurx=1returnendif btnp(?) thenlocal mymnu=menu[cury][curx]if mymnu.cmd=="editval" then_upd=upd_typelocal s=tostr(data[mymnu.cmdy][mymnu.cmdx])if s==nil thens=""endtypetxt=stypecur=#typetxt+1typecall=enter_editendend
endfunction update_list()refresh_list()if btnp(??) thencury-=1endif btnp(??) thencury+=1endcury=(cury-1)%#menu+1cury-=mscrollcury=mid(1,cury,#menu)curx=1local mymnu=menu[cury][curx]if mymnu.y+scrolly>110 thenscrolly-=4endif mymnu.y+scrolly<10 thenscrolly+=4endscrolly=min(0,scrolly)if mymnu.x+scrollx>110 thenscrollx-=2endif mymnu.x+scrollx<20 thenscrollx+=2endscrollx=min(0,scrollx)if btnp(?) thenlocal mymnu=menu[cury][curx]if mymnu.cmd=="newline" thenadd(data,{0,0,0,0,0,0})elseif mymnu.cmd=="editspr" thenselspr=mymnu.cmdy_upd=update_edit_drw=draw_editrefresh_edit()cury=1endend
endfunction update_table()refresh_table()if btnp(??) thencury-=1endif btnp(??) thencury+=1endcury=(cury-1)%#menu+1cury-=mscrollcury=mid(1,cury,#menu)if btnp(??) thencurx-=1endif btnp(??) thencurx+=1endif cury<#menu thencurx=(curx-2)%(#menu[cury]-1)+2elsecurx=1endlocal mymnu=menu[cury][curx]if mymnu.y+scrolly>110 thenscrolly-=4endif mymnu.y+scrolly<10 thenscrolly+=4endscrolly=min(0,scrolly)if mymnu.x+scrollx>110 thenscrollx-=2endif mymnu.x+scrollx<20 thenscrollx+=2endscrollx=min(0,scrollx)if btnp(?) thenlocal mymnu=menu[cury][curx]if mymnu.cmd=="edit" then_upd=upd_typetypetxt=tostr(mymnu.txt)typecur=#typetxt+1typecall=enter_tableelseif mymnu.cmd=="newline" thenadd(data,{0})  elseif mymnu.cmd=="newcell" thenadd(data[mymnu.cmdy],0)endend
endfunction upd_type()if key thenif key=="\r" then-- enter   poke(0x5f30,1)typecall()returnelseif key=="\b" then--backspaceif typecur>1 thenif typecur>#typetxt thentypetxt=sub(typetxt,1,#typetxt-1)elselocal txt_bef=sub(typetxt,1,typecur-2)local txt_aft=sub(typetxt,typecur)typetxt=txt_bef..txt_aftendtypecur-=1endelseif typecur>#typetxt thentypetxt..=keyelselocal txt_bef=sub(typetxt,1,typecur-1)local txt_aft=sub(typetxt,typecur)typetxt=txt_bef..key..txt_aftendtypecur+=1endendif btnp(??) thentypecur-=1endif btnp(??) thentypecur+=1endtypecur=mid(1,typecur,#typetxt+1)
end
-->8
--toolsfunction bgprint(txt,x,y,c)print("\#0"..txt,x,y,c)
endfunction split2d(s)local arr=split(s,"|",false)for k, v in pairs(arr) doarr[k] = split(v)endreturn arr
endfunction mspr(si,sx,sy)local ms=myspr[si]sspr(ms[1],ms[2],ms[3],ms[4],sx-ms[5],sy-ms[6],ms[3],ms[4],ms[7]==1)if ms[7]==2 thensspr(ms[1],ms[2],ms[3],ms[4],sx-ms[5]+ms[3],sy-ms[6],ms[3],ms[4],true)endif ms[8] thenmspr(ms[8],sx,sy)end
endfunction spacejam(n)local ret=""for i=1,n doret..=" "endreturn ret
end
-->8
--i/o
function export()local s=arrname.."=split2d\""for i=1,#data doif i>1 thens..="|"endfor j=1,#data[i] doif j>1 thens..=","ends..=data[i][j]endends..="\""printh(s,file,true)add(msg,{txt="exported!",t=120})--debug[1]="exported!"
end
-->8
--ui
function refresh_edit()menu={}add(menu,{{txt="< sprite "..selspr.." >",w="",cmd="sprhead",x=2,y=2}})local lab={"  x:","  y:","wid:","hgt:"," ox:"," oy:"," fx:","nxt:"}for i=1,8 dolocal s=tostr(data[selspr][i])if s==nil thens="[nil]"endadd(menu,{{txt=lab[i],w="    ",x=2,y=3+i*7},{txt=s,w=spacejam(#s),cmd="editval",cmdy=selspr,cmdx=i,x=2+16,y=3+i*7}}) endendfunction refresh_list()menu={}for i=1,#data dolocal lne={}local linemax=#data[i]if i==cury thenlinemax+=1  endadd(lne,{txt="spr "..i,w="",cmd="editspr",cmdy=i,x=2,y=-4+6*i})add(menu,lne)endadd(menu,{{txt=" + ",w="   ",cmd="newline",x=2,y=-4+6*(#data+1)+2, }})
endfunction refresh_table()menu={}for i=1,#data dolocal lne={}local linemax=#data[i]if i==cury thenlinemax+=1  endadd(lne,{txt=i,w="   ",cmd="",x=4,y=-4+8*i,c=2  })for j=1,linemax doif j==#data[i]+1 thenadd(lne,{txt="+",w=" ",cmd="newcell",cmdy=i,x=-10+14*(j+1),y=-4+8*i, })elseadd(lne,{txt=data[i][j],cmd="edit",cmdx=j,cmdy=i,x=-10+14*(j+1),y=-4+8*i,w="   "})endendadd(menu,lne)endadd(menu,{{txt=" + ",w="   ",cmd="newline",x=4,y=-4+8*(#data+1), }})
endfunction enter_table()local mymnu=menu[cury][curx]local typeval=tonum(typetxt)if typeval==nil thenif mymnu.cmdx==#data[mymnu.cmdy] and typetxt=="" then--delete celldeli(data[mymnu.cmdy],mymnu.cmdx)if mymnu.cmdx==1 thendeli(data,mymnu.cmdy)end_upd=update_tablereturnend  typeval=0enddata[mymnu.cmdy][mymnu.cmdx]=typeval_upd=update_tablerefresh_table()
endfunction enter_edit()local mymnu=menu[cury][curx]local typeval=tonum(typetxt)if typeval==nil thentypeval=0enddata[mymnu.cmdy][mymnu.cmdx]=typeval_upd=update_editrefresh_edit()
end
__gfx__
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00700700000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00077000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00077000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00700700000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
__map__
0000000000000000000000010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000