ValerADHD [Lexaloffle Blog Feed]https://www.lexaloffle.com/bbs/?uid=47278 How does 3D projection work? (in 2 and a half minutes) <p> <table><tr><td> <a href="/bbs/?pid=84897#p"> <img src="/bbs/thumbs/pico8_projectiondemo-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=84897#p"> projectiondemo</a><br><br> by <a href="/bbs/?uid=47278"> ValerADHD</a> <br><br><br> <a href="/bbs/?pid=84897#p"> [Click to Play]</a> </td></tr></table> </p> <img style="" border=0 src="/media/47278/output_30fps_final_compressed_scaled.gif" alt="" /> <p>How does 3D projection work? this gif goes over the basics in 2 and a half minutes!<br /> view the full gif split up here, with captions:<br /> <a href="https://imgur.com/a/DjyHKag">https://imgur.com/a/DjyHKag</a></p> https://www.lexaloffle.com/bbs/?tid=40619 https://www.lexaloffle.com/bbs/?tid=40619 Tue, 01 Dec 2020 12:43:08 UTC Animation Curves cheat sheet/library <p> <table><tr><td> <a href="/bbs/?pid=84765#p"> <img src="/bbs/thumbs/pico8_easingcheatsheet-2.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=84765#p"> easingcheatsheet</a><br><br> by <a href="/bbs/?uid=47278"> ValerADHD</a> <br><br><br> <a href="/bbs/?pid=84765#p"> [Click to Play]</a> </td></tr></table> </p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>load #easingcheatsheet</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>in the Pico-8 command line to load it straight into your Pico-8 application!</p> <img style="" border=0 src="/media/47278/animcurves_final.gif" alt="" /> <p>Easing functions are ways of modifying the rate of change for a linear interpolation function. You may have used these in animation programs (unity, blender, etc.) by manually editing animation curves. This editing isn't all that possible without a large engine backend, but you can easily create short math equations to imitate some of the commonly used curves. This is what I've done here, implementing a set of functions for these curves, and creating a little demo so you can see how each of them changes your interpolation!</p> <h2>Code</h2> <p>All of these functions are completely self sufficient (don't rely on anything outside the function), so you can easily pick and choose which ones you want! (476 tokens for all of them)<br /> (also, none of the functions have any safety regulations, so passing values outside of 0-1 will result in unintended behavior. Be careful! you could also add t=mid(0,t,1) to the start of the functions to clamp the values)</p> <h3>Quadratic functions</h3> <p><div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function easeinquad(t) return t*t end function easeoutquad(t) t-=1 return 1-t*t end function easeinoutquad(t) if(t&lt;.5) then return t*t*2 else t-=1 return 1-t*t*2 end end function easeoutinquad(t) if t&lt;.5 then t-=.5 return .5-t*t*2 else t-=.5 return .5+t*t*2 end end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p></div></div></div></p> <h3>Quartic functions</h3> <p>(these are very similar to quadratics, but flatter at the start and steeper towards the end)<br /> <div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function easeinquart(t) return t*t*t*t end function easeoutquart(t) t-=1 return 1-t*t*t*t end function easeinoutquart(t) if t&lt;.5 then return 8*t*t*t*t else t-=1 return (1-8*t*t*t*t) end end function easeoutinquart(t) if t&lt;.5 then t-=.5 return .5-8*t*t*t*t else t-=.5 return .5+8*t*t*t*t end end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p></div></div></div></p> <h3>Overshooting functions</h3> <p>(these functions overshoot the range slightly and then return to it)<br /> <div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function easeinovershoot(t) return 2.7*t*t*t-1.7*t*t end function easeoutovershoot(t) t-=1 return 1+2.7*t*t*t+1.7*t*t end function easeinoutovershoot(t) if(t&lt;.5) then return (2.7*8*t*t*t-1.7*4*t*t)/2 else t-=1 return 1+(2.7*8*t*t*t+1.7*4*t*t)/2 end end function easeoutinovershoot(t) if t&lt;.5 then t-=.5 return (2.7*8*t*t*t+1.7*4*t*t)/2+.5 else t-=.5 return (2.7*8*t*t*t-1.7*4*t*t)/2+.5 end end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p></div></div></div></p> <h3>Elastic functions</h3> <p>(these functions overshoot slightly and then oscillate near the edges of the range, like an elastic band)<br /> <div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function easeinelastic(t) if(t==0) return 0 return 2^(10*t-10)*cos(2*t-2) end function easeoutelastic(t) if(t==1) return 1 return 1-2^(-10*t)*cos(2*t) end function easeinoutelastic(t) if t&lt;.5 then return 2^(10*2*t-10)*cos(2*2*t-2)/2 else t-=.5 return 1-2^(-10*2*t)*cos(2*2*t)/2 end end function easeoutinelastic(t) if t&lt;.5 then return .5-2^(-10*2*t)*cos(2*2*t)/2 else t-=.5 return 2^(10*2*t-10)*cos(2*2*t-2)/2+.5 end end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p></div></div></div></p> <h3>Bouncing functions</h3> <p>(these functions hit the edge values early, then bounce back a few times)<br /> <div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function easeinbounce(t) t=1-t local n1=7.5625 local d1=2.75 if (t&lt;1/d1) then return 1-n1*t*t; elseif(t&lt;2/d1) then t-=1.5/d1 return 1-n1*t*t-.75; elseif(t&lt;2.5/d1) then t-=2.25/d1 return 1-n1*t*t-.9375; else t-=2.625/d1 return 1-n1*t*t-.984375; end end function easeoutbounce(t) local n1=7.5625 local d1=2.75 if (t&lt;1/d1) then return n1*t*t; elseif(t&lt;2/d1) then t-=1.5/d1 return n1*t*t+.75; elseif(t&lt;2.5/d1) then t-=2.25/d1 return n1*t*t+.9375; else t-=2.625/d1 return n1*t*t+.984375; end end --(ease in+out function omitted, it doesn't really make sense for any uses IMO)</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p></div></div></div></p> <h3>Other useful functions:</h3> <p><div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>--(linear interpolation between a/b) function lerp(a,b,t) return a+(b-a)*t end --(finds the t value that would --return v in a lerp between a/b) function invlerp(a,b,v) return (v-a)/(b-a) end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p></div></div></div></p> <h2>Crediting:</h2> <p>If you use these in your own code, please just put a link to this BBS post in a comment near the function! I want to allow anyone reading your code to be able to find this and use it as well, for learning purposes.<br /> All of the easing functions in this cart are based/translated from this site: <a href="https://easings.net/">https://easings.net/</a></p> <p>Also, feel free to suggest any functions I'm missing! I omitted some of the functions that I thought were redundant/not commonly used, but correct me if I was wrong with that assumption!</p> https://www.lexaloffle.com/bbs/?tid=40577 https://www.lexaloffle.com/bbs/?tid=40577 Fri, 27 Nov 2020 21:13:11 UTC Subpixel Shape Rendering library/testing <p> <table><tr><td> <a href="/bbs/?pid=83942#p"> <img src="/bbs/thumbs/pico8_subpix-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=83942#p"> subpix</a><br><br> by <a href="/bbs/?uid=47278"> ValerADHD</a> <br><br><br> <a href="/bbs/?pid=83942#p"> [Click to Play]</a> </td></tr></table> <br /> I recently saw a post on twitter about &quot;subpixel rendering,&quot; and I wanted to try my hand at a few functions! A couple of hours later... I now have this. I can't promise it's perfect, nor do I have all of the shapes I want to try, but I'll release it now if anyone is interested.<br /> Feel free to suggest any other shapes as well as finding bugs/fixes!</p> https://www.lexaloffle.com/bbs/?tid=40279 https://www.lexaloffle.com/bbs/?tid=40279 Sat, 07 Nov 2020 18:31:55 UTC invertedcircle <p> <table><tr><td> <a href="/bbs/?pid=83816#p"> <img src="/bbs/thumbs/pico8_invertedcircle-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=83816#p"> invertedcircle-2</a><br><br> by <a href="/bbs/?uid=47278"> ValerADHD</a> <br><br><br> <a href="/bbs/?pid=83816#p"> [Click to Play]</a> </td></tr></table> <br /> I noticed that people relatively often ask for a way to draw an inverted circle and don't have an easy way to implement it, since it requires a bit of math that can be difficult to derive without experience. I decided to make a quick cart and standalone function to do that! This isn't amazingly efficient, and it only does circles (not ellipses), but it is a drop in function:<br /> Update: new function utilizing trig, faster and now subpixel!</p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>x=x or 64 y=y or 64 r=r or 32 left=left or 0 right=right or 128 top=top or 0 bottom=bottom or 128 local p=r*6.28 if(top&lt;y-r)rectfill(left,top,right,y-r,c) if(bottom&gt;y+r)rectfill(left,y+r,right,bottom,c) for d=-.001,.25,1/p do local ex,ey=r*cos(d),r*sin(d) if(x-ex&gt;left) then if(y-ey&gt;top) then rect(left,y-ey,x-ex,y-ey,c) end if(y+ey&lt;bottom) then rect(left,y+ey,x-ex,y+ey,c) end end if(x+ex&lt;right) then if(y-ey&gt;top) then rect(x+ex,y-ey,right,y-ey,c) end if(y+ey&lt;bottom) then rect(x+ex,y+ey,right,y+ey,c) end end end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>Old versions:<br /> <div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"><br /> <table><tr><td> <a href="/bbs/?pid=83816#p"> <img src="/bbs/thumbs/pico8_invertedcircle-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=83816#p"> invertedcircle</a><br><br> by <a href="/bbs/?uid=47278"> ValerADHD</a> <br><br><br> <a href="/bbs/?pid=83816#p"> [Click to Play]</a> </td></tr></table> </p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function invertedcircle(x,y,r,left,right,top,bottom,c) x=x or 64 y=y or 64 r=r or 32 left=left or 0 right=right or 128 top=top or 0 bottom=bottom or 128 local rsqr=r*r for i=flr(top),bottom do local yr=i-y local w=max(0,(rsqr-yr*yr)^.5) if(x-w&gt;left)rect(left,i,x-w,i,c) if(x+w&lt;right)rect(right,i,x+w,i,c) end end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p></div></div></div></p> https://www.lexaloffle.com/bbs/?tid=40217 https://www.lexaloffle.com/bbs/?tid=40217 Thu, 05 Nov 2020 20:16:01 UTC Additional Sprite Memory <p> <table><tr><td> <a href="/bbs/?pid=82305#p"> <img src="/bbs/thumbs/pico8_spritesheetgiftest-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=82305#p"> spritesheetgiftest1.0</a><br><br> by <a href="/bbs/?uid=47278"> ValerADHD</a> <br><br><br> <a href="/bbs/?pid=82305#p"> [Click to Play]</a> </td></tr></table> <br /> I was looking into methods for extending the spritesheet memory of a cartridge, but the only result I could find on google (after an admittedly short search) was a post that was slightly inefficient when it loaded the spritesheet into memory, making it only suitable for use in fullscreen graphics like a title screen. This was noted in the post, but I thought that I could make some improvements.</p> <h2>Limitations</h2> <p>This code is very small when inserted into the cart, other than the actual spritesheet data. The current data is stored in a completely uncompressed binary string, which in the worst case can balloon up to 16-20k characters.<br /> (NOTE: This is only when storing a completely black spritesheet, which should ideally be never. If your spritesheet has large portions of completely black (color 0) space, try replacing it with some other color you're not using, or using palette swapping.) The average spritesheet should be able to be stored in 8-10k characters.<br /> Currently my implementation only supports replacing the entire spritesheet at once, though this could be easily improved to allow copying 64x64, 32x32, 16x16, and 8x8 chunks individually.</p> <h3>Possible future improvements:</h3> <p>As mentioned earlier, this is severely limited by a lack of compression. It would be relatively easy to implement an RLE compression for the strings, then decompress them at runtime. Alternatively, it would also be easy implement PX9 compression for the spritesheet before it is loaded into a string, then decompress it at runtime.</p> <h2>Usage:</h2> <h3>Export:</h3> <p> <table><tr><td> <a href="/bbs/?pid=82305#p"> <img src="/bbs/thumbs/pico8_spritesheet_str_export-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=82305#p"> spritesheet_str_export</a><br><br> by <a href="/bbs/?uid=47278"> ValerADHD</a> <br><br><br> <a href="/bbs/?pid=82305#p"> [Click to Play]</a> </td></tr></table> <br /> This cart includes all of the functions to export a spritesheet from a cart. To use: Load cart in an offline instance of PICO-8, uncomment the line &quot;reload(0,0,&quot;mycart.p8&quot;), and replace &quot;mycart.p8&quot; with the name of the cart you wish to export the spritesheet from. Alternately, draw a new spritesheet into this cartridge or use PICO-8's drag and drop feature to import an image. Run the cart, which will save the string to your clipboard. </p> <h3>Usage in your own carts:</h3> <p> <table><tr><td> <a href="/bbs/?pid=82305#p"> <img src="/bbs/thumbs/pico8_spritesheet_str_import_1_1-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=82305#p"> spritesheet_str_import_1_1</a><br><br> by <a href="/bbs/?uid=47278"> ValerADHD</a> <br><br><br> <a href="/bbs/?pid=82305#p"> [Click to Play]</a> </td></tr></table> </p> <p>^^Example^^: look at code for sample importing of a string.</p> <p>Once you have your data saved into the clipboard, you can put it into your cartridge.<br /> When you are going to paste this string into your own game, <strong>make sure to press CTRL-P to enable puny font.</strong> This method will not work properly without doing this.<br /> Paste the clipboard data into a new string in your game.<br /> Now, you're going to need to add these two methods to your game: (146 tokens)</p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function spritesheet_to_table() local tbl={} for y=0,127 do for x=0,15 do tbl[(y&lt;&lt;4)+x]=$((y&lt;&lt;6)+(x&lt;&lt;2)) end end return tbl end function string_to_table(str) local tbl={} for i=0,8191,4 do local al,ah,eal,eah= (ord(str,i+1)), (ord(str,i+2)), (ord(str,i+3)), (ord(str,i+4)) tbl[i\4]= al|(ah&lt;&lt;&gt;8)| (eal&lt;&lt;&gt;16)|(eah&lt;&lt;&gt;24) end return tbl end function table_to_spritesheet(tbl) for y=0,127 do for x=0,15 do poke4((y&lt;&lt;6)+(x&lt;&lt;2), tbl[(y&lt;&lt;4)+x]) end end end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>The first method should be called in your _init function like this:<br /> ('original_spritesheet_table' is the data for your base cartridge spritesheet, so that it can be loaded efficiently later.<br /> 'your_spritesheet_table' will be initialized here, replace the name with what you want to call it later. 'your_str' is what you named the string that you pasted into.)</p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>original_spritesheet_table=spritesheet_to_table() your_spritesheet_table=string_to_table(your_str)</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>This will load the string into Lua memory, which should come at almost no cost to your final product.</p> <p>Now, whenever you want to switch to your other spritesheet, simply call</p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>table_to_spritesheet(your_spritesheet_table)</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>To restore the original spritesheet, you need to call</p> <div> <div style="max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>table_to_spritesheet(original_spritesheet_table)</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>This function only takes 7% of the CPU time on a single frame (at 30fps), but since it needs to be called twice if you're going to use both spritesheets every frame, plan to have it use 15% of the CPU time.<br /> NOTE: If you don't care about performance, but are low on tokens, you can remove the entire 'spritesheet_to_table()' function and instead use reload(0,0,0x1fff) to reset the spritesheet. However, this is vastly more inefficient, taking 20% of the CPU time of a frame at 30fps.</p> <h2>Explanation</h2> <p>These methods are not new, I just couldn't find any documentation of them for people to easily make use of them on the BBS.<br /> This method makes use of the fact that a single number value in a Lua table is 4 bytes long, so you can easily make use of poke4 to quickly load a large amount of data into memory. This method first uses peek4 every 4 bytes in the spritesheet, loading the values directly into a table with no fiddling around with byte ordering. This allows it to entirely ignore the endianness of the functions. When you want to load a table back into memory, it's easy enough to just loop through the table again calling poke4 with each value of the table to quickly load 8px of the spritesheet in a single function call.<br /> The most confusing part of this method, and the most easily breakable part, is the actual saving of this data. When loading it into a string, it is most efficient to store it in plaintext binary form. This storage is detailed by zep in this post:<br /> <a href="https://www.lexaloffle.com/bbs/?tid=38692">https://www.lexaloffle.com/bbs/?tid=38692</a><br /> However, a single character can only store a single byte. So whenever you save it as a string, and load it from a string, you need to decompose and recompose the 4 bytes of the number into 4 individual characters. This is only an intermediary form, so other than cartridge size, how this is stored is almost entirely independent of final performance. This means that in future, this could be optimized using methods like RLE or PX9 without affecting the final performance of the functions at all, as long as the decompression step comes before loading the data into the table.</p> <h3>Possible optimizations:</h3> <p>Currently the most of the saving/loading functions use nested for loops, but this could be simplified relatively easily to use a single larger for loop for more efficiency.<br /> There may be other optimizations I missed/didn't implement, feel free to suggest them/show code for them if you find any!</p> https://www.lexaloffle.com/bbs/?tid=39745 https://www.lexaloffle.com/bbs/?tid=39745 Sat, 26 Sep 2020 20:31:00 UTC