当前UI状态
目前，我们的编辑器界面有一侧边栏时间线，用户可以通过鼠标或键盘与时间线进行交互。我们还提供了一个预览界面和UI覆盖层，用于显示不同敌人的生成位置等信息。
问题与挑战
我们最初采用的是一种在现代UI设计中非常常见的范式，即“所见即所得”（WYSIWYG）。然而，在编辑游戏日程时，我们遇到了一个问题：我们正在编辑的内容（敌人的生成事件）并不总是在屏幕上可见。为了解决这个问题，我们添加了一个额外的时间线UI，用于显示生成事件。但这并不是我们想要的最终解决方案。
改进思路
我们希望能够恢复一些“所见即所得”的感觉，让用户能够直接点击并移动屏幕上的敌人。但这样做会带来一个挑战：如何准确判断鼠标点击的是哪个敌人？
实现步骤
- 解决鼠标悬停问题：首先，我们添加了一个变量来检测鼠标是否移动，从而避免在鼠标悬停在按钮上时无法移动选择的问题。
- 数据驱动UI：接着，我们改变了直接从数据绘制UI的方式，而是先根据数据生成敌人精灵列表，然后再绘制这些精灵。这样做的好处是我们可以更容易地与这些精灵进行交互。
- 实现敌人点击交互：通过遍历敌人精灵列表，我们实现了点击敌人时的交互效果，比如显示敌人的生成位置。
- 创建下拉菜单：当用户点击敌人时，我们希望显示一个下拉菜单，提供编辑敌人的选项（如改变类型、移动、复制、删除等）。我们创建了一个新的更新和绘制函数来处理下拉菜单的显示和交互。
下拉菜单的实现细节
- 位置计算：下拉菜单的位置需要根据点击的敌人位置来计算，以确保它不会出现在屏幕之外。
- 交互逻辑：我们添加了鼠标和键盘的交互逻辑，使用户可以通过点击或按键来选择下拉菜单中的选项。
pico-8 cartridge // http://www.pico-8.com
version 41
__lua__
--show cursor
--move the cursor
--backspacefunction _init()--- customize here ---#include shmup_sched.txtfile="shmup_sched.txt"arrname="sched"data=sched#include shmup_mapsegs.txt#include shmup_enlib.txt#include shmup_anilib.txt#include shmup_myspr.txt----------------------debug={}msg={}_drw=draw_map_upd=update_mapmenuitem(1,"export",export)reload(0x0,0x0,0x2000,"cowshmup.p8")reload(0x1000, 0x1000, 0x2000, "cowshmup.p8")curx=1cury=1scrolly=0scrollx=0enemies={}scroll=0xscroll=0poke(0x5f2d, 1)selsched=nilt=0
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()t+=1dokeys()domouse()mscroll=stat(36)_upd()
endfunction dokeys()if stat(30) thenkey=stat(31)if key=="p" thenpoke(0x5f30,1)endelsekey=nilendendfunction domouse()local oldmousex=mousexlocal oldmousey=mouseymousex=stat(32)mousey=stat(33)mousemove=falseif mousex!=oldmousex or oldmousey!=mousey thenmousemove=trueendif stat(34)==0 thenclkwait=falseendclkl=falseclkr=falseif not clkwait thenif stat(34)==1 thenclkl=trueclkwait=trueelseif stat(34)==2 thenclkl=trueclkwait=true endendend
-->8
--drawfunction draw_drop()drawbg()drawmenu()drawcur(mousex,mousey)
endfunction draw_map()drawbg()-- timelinefor i=0,21 dolocal iscr=scroll+(20-i)-10local ens=spwnlst(iscr)if i==10 or iscr%5==0 thenprint(" "..tostrn(iscr,4),0,i*6,7)print("-",21,i*6,7)endif #ens>0 thenlocal s=""local uix=26for j=1,#ens doprint(tostrn(ens[j][2],2,"0"),uix,i*6,7)uix+=10endendif iscr<0 thenbreakendenddrawmenu()drawcur(mousex,mousey)--debug[1]=scrollendfunction draw_table()cls(2)--spr(0,0,0,16,16)drawmenu()if _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)end--[[for i=1,#data dofor j=1,#data[i] dobgprint(data[i][j],2+18*j,2+8*i,7)endend]]
endfunction drawmenu()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) endendend
endfunction drawcur(cx,cy)local col=rnd({6,7})line(cx,cy-1,cx,cy-2,col)line(cx,cy+1,cx,cy+2,col)line(cx-1,cy,cx-2,cy,col)line(cx+1,cy,cx+2,cy,col)
endfunction drawbg()cls(2)for i=1,#mapsegs dolocal segnum=mapsegs[i]local sx=segnum\4*18local sy=segnum%4*8map(sx,sy,xscroll,scroll-((i-2)*64),18,8)endcamera(-xscroll,0)genens()-- draw enemiesif selsched thenlocal col=11+16*12fillp(flr(▥))line(0,selsched[4],127,selsched[4],col)fillp(flr(▤))line(selsched[3],0,selsched[3],127,col)line(selsched[3],selsched[4],selsched[3]-128,selsched[4]+128,col)line(selsched[3],selsched[4],selsched[3]+128,selsched[4]+128,col)line(selsched[3],selsched[4],selsched[3]-128,selsched[4]-128,col)line(selsched[3],selsched[4],selsched[3]+128,selsched[4]-128,col)fillp() endfor en in all(enemies) domspr(en.s,en.x,en.y)if en.sched==selsched thenrect(en.x-8,en.y-8,en.x+9,en.y+9,rnd({6,7}))endendcamera()
end
-->8
--updatefunction update_drop()refresh_drop()if btnp(⬆️) thencury-=1endif btnp(⬇️) thencury+=1endcury=mid(1,cury,#menu)if btnp(⬅️) thencurx-=1endif btnp(➡️) thencurx+=1endcurx=mid(1,curx,#menu[cury])-- mouse button controllocal mousehit=falseif mousemove or clkl thenfor my=1,#menu dofor mx=1,#menu[my] doif mousecol(menu[my][mx]) thencurx=mxcury=myif clkl thendobutton(menu[cury][curx])endendendend end
endfunction update_map()refresh_map()scroll+=mscroll*8xscroll=mid(0,(mousex-10)/108,1)\-0.0625cury=1if btnp(⬇️) thenscroll-=1curx=2endif btnp(⬆️) thenscroll+=1 curx=2endscroll=max(0,scroll)if btnp(⬅️) thencurx-=1endif btnp(➡️) thencurx+=1endcurx=mid(2,curx,#menu[cury])if btnp(❎) thendobutton(menu[cury][curx])returnendselsched=menu[cury][curx].cmdsch-- mouse button controllocal mousehit=falseif mousemove or clkl thenfor my=1,#menu dofor mx=1,#menu[my] doif mousecol(menu[my][mx]) thencurx=mxcury=myselsched=menu[cury][curx].cmdschmousehit=trueif clkl thendobutton(menu[cury][curx])returnendendendend endif not mousehit thenfor en in all(enemies) doif col3(en) thenselsched=en.schedmousehit=trueif clkl thendropx=en.x+xscrolldropy=en.yrefresh_drop()_drw=draw_drop_upd=update_drop endendendendif key=="t" then_drw=draw_table_upd=update_tablerefresh_table()returnendendfunction update_table()refresh_table()if key=="m" then_drw=draw_map_upd=update_maprefresh_map()returnendif 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+1elseif 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-- enterlocal mymnu=menu[cury][curx]poke(0x5f30,1)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_tablereturnelseif 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 _x,_y,_w,_h,_ox,_oy,_fx,_nx=unpack(myspr[si])sspr(_x,_y,_w,_h,sx-_ox,sy-_oy,_w,_h,_fx==1)if _fx==2 thensspr(_x,_y,_w,_h,sx-_ox+_w,sy-_oy,_w,_h,true)endif _nx thenmspr(_nx,sx,sy)end
endfunction msprc(si,sx,sy)local _x,_y,_w,_h,_ox,_oy,_fx,_nx=unpack(myspr[si])rect(sx-_ox,sy-_oy,sx-_ox+_w-1,sy-_oy+_h-1,rnd({8,14,15}))
endfunction drawobj(obj)mspr(cyc(obj.age,obj.ani,obj.anis),obj.x,obj.y)--★if coldebug and obj.col thenmsprc(obj.col,obj.x,obj.y)end
endfunction cyc(age,arr,anis)local anis=anis or 1return arr[(age\anis-1)%#arr+1]
endfunction sortsched()if #sched<2 then return endrepeatlocal switch=falsefor i=1,#sched-1 doif sched[i][1]>sched[i+1][1] then sched[i],sched[i+1]=sched[i+1],sched[i]switch=trueendenduntil switch==falseendfunction tostrn(v,l,ch)local ch=ch or " "local sv=tostr(v)if #sv<l thenlocal diff=l-#svfor i=1,diff dosv=ch..svend endreturn sv
endfunction spwnlst(scr)local ret={}for s in all(sched) doif s[1]==scr thenadd(ret,s)endendreturn ret
endfunction mousecol(b)local wid=#b.w*4-1if mousex<b.x-1 then return false endif mousey<b.y-1 then return false endif mousex>b.x+wid then return false endif mousey>b.y+5 then return false endreturn true
endfunction col3(ob)local _bx,_by,_bw,_bh,_box,_boy,_bfx=unpack(myspr[ob.col])local a_left=mousex-xscrolllocal a_top=mouseylocal a_right=mousex-xscrolllocal a_bottom=mouseylocal b_left=flr(ob.x)-_boxlocal b_top=flr(ob.y)-_boylocal b_right=b_left+_bw-1local b_bottom=b_top+_bh-1if a_top>b_bottom then return false endif b_top>a_bottom then return false endif a_left>b_right then return false endif b_left>a_right then return false endreturn true
end
-->8
--i/o
function export()sortsched()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
--uifunction refresh_drop()menu={}add(menu,{{txt="type",w=" ",cmd="",x=dropx,y=dropy,c=13}})add(menu,{{txt="move",w=" ",cmd="",x=dropx,y=dropy+6,c=13}})add(menu,{{txt="copy",w=" ",cmd="",x=dropx,y=dropy+12,c=13}}) add(menu,{{txt="delete",w=" ",cmd="",x=dropx,y=dropy+18,c=13}}) endfunction refresh_map()menu={}local lne={}add(lne,{txt=tostrn(scroll,4),w=" ",cmd="",x=4,y=60,c=6})local uix=26local ens=spwnlst(scroll)if #ens>0 thenfor i=1,#ens doadd(lne,{txt=tostrn(ens[i][2],2,"0"),w=" ",cmd="editen",cmdsch=ens[i],x=uix,y=60,c=13}) uix+=10 end endadd(lne,{txt="+",w=" ",cmd="adden",x=uix,y=60,c=13})add(menu,lne)
endfunction genens()enemies={}for sch in all(sched) dolocal schx=sch[3]local schy=sch[4]+scroll-sch[1]local en=enlib[sch[2] ]local ani=anilib[en[1] ]add(enemies,{x=schx,y=schy,s=cyc(t,ani,en[2]),sched=sch,col=en[5]})end
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 dobutton(b)if b.cmd=="adden" thenlocal sch={}sch[1]=scroll sch[2]=1sch[3]=64sch[4]=8add(sched,sch)elseif b.cmd=="editen" then--dropx=mid(2,b.cmdsch[3],128-25)--dropy=mid(2,b.cmdsch[4],128-30)dropx=b.xdropy=b.yrefresh_drop()_drw=draw_drop_upd=update_drop endend
__gfx__
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00700700000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00077000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00077000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
00700700000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
__map__
0000000000000000000000010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
