Krystman [Lexaloffle Blog Feed]https://www.lexaloffle.com/bbs/?uid=16423 Making a Shmup in Pico-8 - Beginner Tutorial <p>I'm starting a tutorial on how to make your a Shmup in Pico-8 from scratch! It's for complete beginners.</p> <img style="" border=0 src="/media/16423/shmup_01lexa.png" alt="" /> <p>The goal is to make a basic Shmup first and then slowly turn it into an AWESOME shmup!</p> <p><img style="" border=0 src="/media/16423/shmupie2_1.gif" alt="" /> <img style="" border=0 src="/media/16423/shmup_1.gif" alt="" /></p> <p>New episodes on Wednesdays and Saturdays. I will use this thread to keep a list of the episodes and post significant progress. Let's gooooo!</p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/81WM_cjp9fo&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/81WM_cjp9fo&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> <p><a href="https://www.youtube.com/watch?v=ICf5RvdS7wQ">Episode 2 - Moving Stuff</a><br /> <a href="https://www.youtube.com/watch?v=mOQCUb5RpAs">Episode 3 - Controls</a><br /> <a href="https://www.youtube.com/watch?v=h3HcdDvr8cc">Episode 4 - Shooting</a><br /> <a href="https://www.youtube.com/watch?v=yXRjdMZYv0U">Episode 5 - Animation</a><br /> <a href="https://www.youtube.com/watch?v=RFeJxhPmkYk">Episode 6 - Health UI</a><br /> <a href="https://www.youtube.com/watch?v=dJulSJZgfJo">Episode 7 - Starfield</a><br /> <a href="https://www.youtube.com/watch?v=n90CBc1KzZs">Episode 8 - Animating Stars</a><br /> <a href="https://www.youtube.com/watch?v=2httrC7c1m0">Episode 9 - Game Over</a><br /> <a href="https://www.youtube.com/watch?v=5jQ7SRbobgY">Episode 10 - More Bullets</a><br /> <a href="https://www.youtube.com/watch?v=bdANVxmTvXk">Episode 11 - Enemies</a><br /> <a href="https://www.youtube.com/watch?v=rqUDCYnN3yk">Episode 12 - Collsions</a><br /> <a href="https://www.youtube.com/watch?v=MW70_1rYgJQ">Episode 13 - Invulnerability</a><br /> <a href="https://www.youtube.com/watch?v=VyPITPFdRDs">Episode 14 - Explosions</a><br /> <a href="https://www.youtube.com/watch?v=rf2Ikaxugdk">Episode 15 - Better Explosions</a><br /> <a href="https://www.youtube.com/watch?v=Yvb7rC2PLnA">Episode 16 - Shockwaves</a><br /> <a href="https://www.youtube.com/watch?v=f3QiMe0zd6c">Episode 17 - Music</a><br /> <a href="https://www.youtube.com/watch?v=sAb9hSRVWCk">Episode 18 - More Enemies</a><br /> <a href="https://www.youtube.com/watch?v=UHZurvjBV1I">Episode 19 - Big Enemies</a><br /> <a href="https://www.youtube.com/watch?v=c1Wfg6F1v5I">Episode 20 - Enemy Spawns</a><br /> <a href="https://www.youtube.com/watch?v=0UoE_rUl1qc">Episode 21 - Enemy Movement</a><br /> <a href="https://www.youtube.com/watch?v=eZoQoWoUZ6g">Episode 22 - Enemy Attacks</a><br /> <a href="https://www.youtube.com/watch?v=B0V5acN27FE">Episode 23 - Enemy Bullets</a><br /> <a href="https://www.youtube.com/watch?v=JQrroRRKbbk">Episode 24 - Spread Shots</a><br /> <a href="https://www.youtube.com/watch?v=XEczmaa4dm8">Episode 25 - Aimed Shots</a><br /> <a href="https://www.youtube.com/watch?v=hcaT5fmxvJE">Episode 26 - Pickups</a><br /> <a href="https://www.youtube.com/watch?v=lXPvgxIuSKk">Episode 27 - Bombs</a><br /> <a href="https://www.youtube.com/watch?v=jPC09Pf9Kpo">Episode 28 - Boss</a><br /> <a href="https://www.youtube.com/watch?v=qfuD16YJnL8">Episode 29 - The End</a></p> <p>Also annoucing the <a href="https://itch.io/jam/basic-shmup">Lazy Devs Basic Shmup Showcase</a>. If you participated in the tutorial you have one month to finish your game and submit it to the showcase. I pledge to play all of the submitted game and to discuss them in a dedicated video!</p> <img style="" border=0 src="/media/16423/cover_sml.png" alt="" /> https://www.lexaloffle.com/bbs/?tid=47630 https://www.lexaloffle.com/bbs/?tid=47630 Mon, 02 May 2022 07:30:53 UTC Circular Clipping Masks <h1>Circular Clipping Masks</h1> <p>I wanted to create a comprehensive post on how to create Circular Clipping Masks. This post goes together with a video tutorial I made which you can watch here:</p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/435tL1chJhI&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/435tL1chJhI&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> <p>But if the video doesn't work or you don't want to watch a long video, I want this post to make sense without it.</p> <h2>What is it and why do I need it?</h2> <p>Pico-8 has this function called <a href="https://pico-8.fandom.com/wiki/Clip">CLIP()</a>. It restricts all drawing to a rectangular area on the screen. A Circular Clipping Mask is that but instead of a square area it's a circular area. The simplest version of this function is drawing the game inside a screen and making everything around it black.</p> <p>There are many names for this effect. I call this a &quot;Circular Clipping Mask&quot; in this thread. But possible names could be also &quot;Iris Out&quot;, &quot;Circular Stencil&quot;, &quot;Circular Matte&quot;, &quot;Inverted Circle Fill&quot;, etc...</p> <p>One typical application of such function is a cartoony screen transition at the end of a level like in Super Mario World. Another application is making a &quot;dark level&quot;. You only render the environment around the player's character in order to simulate an environment with low visibility.</p> <p><img style="" border=0 src="/media/16423/marioout.gif" alt="" /> <img style="" border=0 src="/media/16423/zeldaout.gif" alt="" /></p> <p>But this sort of functionality can go a long way. Some games hinge their entire game mechanic around it, like in case of independent titles like <a href="https://store.steampowered.com/app/72000/Closure/">Closure</a> or <a href="https://store.steampowered.com/app/321920/Schein/">Schein</a>.</p> <img style="" border=0 src="/media/16423/schein_smal.gif" alt="" /> <p>Many devs find themselves in situations where they want a Circular Clipping Mask but Pico-8 doesn't provide straight-forward tools to make one. So in this post I want to discuss 4 different techniques to pull of this effect. I also want to invite you to post your own solution so we can build a repository of tools to tackle this recurring problem.</p> <h2>Workbench</h2> <p>I want to show off code in a practical application scenario. So I decided to mod Jelpi's code to allow us to try out different approaches and to compare the results. Here is the workbench cart I will be using for this post. You can just download this or create your own:</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_workbench-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Workbench</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <p><strong>NOTE</strong> <em>In the cart above all the Circular Mask code is in tab 1 for your convenience. This is a small change from the video. I hope this won't lead to any confusion.</em></p> <p>Changes I've made</p> <ul> <li>Created a BEFOREDRAW() function and inserted it in the _DRAW() function just before the comment <em>&quot;-- decide which side to draw&quot;</em></li> <li>Created a AFTERDRAW() function and inserted it in the _DRAW() function at the very end</li> <li>Commented out the CLIP() statement from the DRAW_WORLD() function so it doesn't interfere with my own clipping mask</li> <li>Inside the _DRAW() function, just before the BEFOREDRAW() call, I fill the screen with pink hearts. This effect is triggered by setting the global variable DRAWMYBG to TRUE. This is something I want to use later to optionally test our ability to combine two unrelated scenes. The hearts themselves don't matter, could be any visually distinct effect.</li> <li>Inside the BEFOREDRAW() function I calculate Jelpi's position on screen and save it in global variables</li> </ul> <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> myx=pl[1].x*8-cam_x myy=pl[1].y*8-cam_y-4 </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 test if this works I draw a 32 x 32 clipping rectangle around Jelpi using CLIP() in BEFOREDRAW(). I also draw a red circle in AFTERDRAW() that perfectly matches the clipping rectangle. Our goal is to find out ways how we can fill in the gaps between the circle and the square. Let's go!</p> <img style="" border=0 src="/media/16423/jelpi_1.png" alt="" /> <h1>Method 1: Big Dumb Sprite</h1> <p>This is the simplest solution for this problem. Just draw a big circle in the spritesheet and render it on top of the clipping rectangle to fill in the gaps. You need to set the black color to opaque using PALT(). You also need to pick some other color to become the transparent color so the center of the circle becomes see-trough. The result is something like this:</p> <p><img style="" border=0 src="/media/16423/29_circ1a_0.png" alt="" /> <img style="" border=0 src="/media/16423/circ1a_2.png" alt="" /> </p> <p>This is a small circle. You can make a bigger one but that will start eating into your spritesheet. So it pays off to make sure you're using the sprite efficiently. Instead of drawing the entire circle in one big sprite you can only create a quarter-circle sprite and draw it 4 times flipped vertically and horizontally.</p> <p><img style="" border=0 src="/media/16423/circ1b_ani_0.gif" alt="" /> <img style="" border=0 src="/media/16423/31_circ1b_0.png" alt="" /></p> <p>This will give you more bang for your buck and you'll get a nice big circle.</p> <p>But that circle is still relatively static. We can scale the size of the clipping rectangle and use SSPR() to make sure our sprites scale accordingly. This works fine but does result in some pixelation.</p> <img style="" border=0 src="/media/16423/method1_0.gif" alt="" /> <p>Your AFTERDRAW() function ends up looking like this. MYX and MYY are the coordinates of the center of the circle. MYR is the radius.</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 afterdraw() palt(8,true) palt(0,false) sspr(80,16,16,16,myx-myr,myy-myr,myr,myr) sspr(80,16,16,16,myx,myy-myr,myr,myr,true) sspr(80,16,16,16,myx-myr,myy,myr,myr,false,true) sspr(80,16,16,16,myx,myy,myr,myr,true,true) palt() 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>And here is the cart for you to download</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_method1-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Method 1</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <h3>Pros</h3> <ul> <li>Super simple. No crazy math or memory manipulation. If you know how to draw sprites in Pico-8 you can probably make this work.</li> <li>Not limited to circles. You can easily make any clipping mask shape you want! </li> </ul> <img style="" border=0 src="/media/16423/circ1c_heart_0.gif" alt="" /> <h3>Cons</h3> <ul> <li>The scaling looks pixelated</li> <li>You end up using precious sprite sheet space</li> <li>It's not a <strong>REAL</strong> clipping mask. You can only turn the background into a solid color. You cannot seamlessly draw one image on top of another</li> </ul> <h1>Method 2: Bunch of Circles</h1> <p>In order to save precious sprite sheet space and make things look nice and smooth, how about we draw the circles procedurally? We can't use the CIRCFILL() function to fill the outside of the circle. But how about we draw a bunch of circles with CIRC() and increase the radius as we go? Well, this will get you something like this:</p> <img style="" border=0 src="/media/16423/circ2_ani_0.gif" alt="" /> <p>As you can see, this doesn't quite work. You get some ugly gaps between the circles. The algorithm that draws the circles doesn't create circles that neatly fit into each other. And you can't draw more circles in-between to fill in the gaps since the radius needs to be an integer number.</p> <p>But you can fill the gaps by drawing more circles. Every time you draw a circle you just draw a second, identical circle shifted by one pixel in any direction. This results in a complete coverage.</p> <img style="" border=0 src="/media/16423/circ2_ani_2.gif" alt="" /> <p>Something you need to pay attention to is <em>how many</em> circles you draw. As the clipping rectangle gets bigger there are more pixels to cover.</p> <img style="" border=0 src="/media/16423/circ2a_0.gif" alt="" /> <p>So you need to increase the number of circles to do the job. Drawing around RADIUS/2 number of circles seems to be about right. The result is going to look like this:</p> <img style="" border=0 src="/media/16423/circ2b_0.gif" alt="" /> <p>Your AFTERDRAW() function ends up looking like this.</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 afterdraw() palt(0,false) for i=0,flr(myr/2) do circ(myx,myy,myr+i,0) circ(myx-1,myy,myr+i,0) end palt() 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>And here is the cart for you to download</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_method2-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Method 2</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <h3>Pros</h3> <ul> <li>Scales cleanly</li> <li>Uses no sprites</li> <li>Fairly simple</li> </ul> <h3>Cons</h3> <ul> <li>Feels a bit janky. Drawing whole bunch of overlapping circles just to cover the gaps.</li> <li>Mask not perfectly circular. Ends up a bit egg-shaped.</li> </ul> <h1>Method 3: Math!</h1> <p>Ok, time to put our big boy pants on. It's time for Math! This method is something that some devs would maybe consider &quot;the proper way&quot; of doing things. We are going to fill in the corners of the square by drawing the circle manually using a bunch of LINE() functions. We fill only in the areas we need line by line. However, in order to do that we need a mathematical function that tells us how to slice up a circle into individual lines. This sounds like it would use trigonometry but it's actually fairly simple. The following GIF / Cart examplifies:</p> <img style="" border=0 src="/media/16423/math_0.gif" alt="" /> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_math-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> circular_mask_math</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <p>I explain the Math more in detail in the video. But in short, we draw a circle with the center at coordinate 0,0 with the radius of 1. By applying the <a href="https://en.wikipedia.org/wiki/Pythagorean_theorem">Pythagoras Theorem</a> we can plug in 1 as the length of the hypotenuse (c). We can then solve by a or b to derive a function that descirbes that kind of circle on a 2D grid. For any given X we can calulate the Y using this formula:</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>y = sqrt(1 - x*x)</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 equasion is going to be our &quot;reference circle&quot;. All we need to do now is do a for loop that will iterate along one of the edges of the clipping rectangle and keep drawing lines into the rectangle. We need to translate the screen coordinates into a value between -1 and 1 to look up where on the reference circle any given line is. We will get a number between 0 and 1 as a return. This number needs to get multiplied with the radius to calculate how long each line has to be to form a nice circle. Here is what this looks like in &quot;slow-mo&quot;.</p> <img style="" border=0 src="/media/16423/circ3_ani_1.gif" alt="" /> <p>Of course you then need to also draw a second line on the other side of the rectangle but that's just using the same result, no need to go through the calculations twice. This method requires quite a bit of fiddling with the math to get it to work. But when you get it to work you'll arrive at something like this:</p> <img style="" border=0 src="/media/16423/method3 p8_0.gif" alt="" /> <p>Your AFTERDRAW() function ends up looking like this.</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 afterdraw() palt(0,false) local py=myy-myr for px=myx-myr,myx+myr do local cval=px-(myx-myr) cval=cval/(myr*2) cval=cval*2-1 cval=1-sqrt(1-cval*cval) local ph=cval*myr+0.01 line(px,py,px,py+ph,0) line(px,py+myr*2-ph,px,py+myr*2,0) end palt() 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>And here is the cart for you to download</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_method3-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Method 3</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <h2>Fake Alpha with Method 3</h2> <p>The true power of Method 3 becomes apparent if we explore it's versatility. Since we are drawing everything manually we have access to some stunning effects. For instance, we can create an effect where the outside of the circle isn't just a solid black color but a dimmer version of the image - fake alpha transparency so to speak. To pull this off we are going to take advantages of the Video Remapping functionality in <a href="https://www.lexaloffle.com/bbs/?tid=45538">Pico 0.2.4</a>.</p> <p>Here is how the effect works. Instead of filling in just the corners of the clipping rectangle, we will fill the <strong>ENTIRE SCREEN</strong> with our black lines. And instead of black lines we are going to use SSPR to draw thin, line-shaped sprites. We will use Video Remapping to use the screen as the spritesheet. So we will redraw the entire screen line-by-line back onto itself, apply a palette change and leave a circular opening out. This is what the effect looks like (first in &quot;slow-mo&quot; and then in real-time):</p> <p><img style="" border=0 src="/media/16423/circ3b_ani_0.gif" alt="" /> <img style="" border=0 src="/media/16423/method3b p8_0.gif" alt="" /></p> <p>This is a lot to take in but here is a commentated AFTERDRAW() function that hopefully steps you through the process</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 afterdraw() --remap the spritesheet to the screen --spr+sspr statements will draw from the screen back onto the screen now poke(0x5f54,0x60) --palette shift everything a shade darker pal({0,1,1,2,0,5,5,2, 5,13,3,1,1,2,13}) --this calulates the top edge of the clipping rectangle local py=myy-myr --loop through the entire screen! for px=0,127 do --math that converts screen coordinates to a range compatible with our reference circle function local cval=px-(myx-myr) cval=cval/(myr*2) cval=cval*2-1 --if we're outside the circle just draw the entire line if abs(cval)&gt;1 and myr==0 then ssprline(px,0,px,128) else --the actual circle function cval=1-sqrt(1-cval*cval) --calculate length of the line local ph=cval*myr --draw both lines ssprline(px,0,px,py+ph) ssprline(px,py+myr*2-ph,px,129) end end --reset things to normal poke(0x5f54,0) pal() end --helper wrapper for sspr that allows us to conveniently change a line function into an sspr function function ssprline(x1,y1,x2,y2) sspr(x1,y1,1,y2-y1,x1,y1) 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>And here is the cart for you to download</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_method3alpha-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Method 3 Fake Alpha</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <h2>True Clipping Mask with Method 3</h2> <p>So far, our clipping masks haven't been &quot;real&quot; clipping masks. We just filled the outside with a solid black. A true clipping mask like the one you'll get with the CLIP() function should also allow you to combine two unrelated images. The previous step already paved the way to make this happen.</p> <img style="" border=0 src="/media/16423/DEMO2.png" alt="" /> <p>Finally it's time to set our DRAWMYBG variable from the Workbench to TRUE so the program will draw a cute heart background before drawing the Jelpi game. Our goal is now to combine the two images using a circular mask.</p> <p>Here is how that will work. </p> <ol> <li>Draw the cute heart background</li> <li>Take the contents of the screen (the heart background) and save them into RAM. We will use the new extended RAM functionality of 0.2.4 for that. Essentially, we will take a screenshot.</li> <li>Draw the Jelpi game as normal</li> <li>Copy the screenshot we made earlier into the spritesheet</li> <li>Use the line-drawing function as before to draw the entire screen line by line leaving out a circular spot. But now we will actually use the spritesheet as the source, which now contains the heart background.</li> <li>Reset the spritesheet to what it was before</li> </ol> <img style="" border=0 src="/media/16423/PLAN01.png" alt="" /> <p>This is what the effect looks like (first step 5 in &quot;slow-mo&quot; and then everything in real-time):</p> <p><img style="" border=0 src="/media/16423/circ3c_ani_0.gif" alt="" /> <img style="" border=0 src="/media/16423/method3c_0.gif" alt="" /></p> <p>The code for this is actually deceptively similar than the previous one so instead of posting the entire AFTERDRAW() function again, I will just focus on important lines. You can look at the final code in the cart posted below.</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> --this will copy the screen contents to a spot in the new expanded RAM section --essentially, this makes a screenshot memcpy(0x8000,0x6000,0x2000) --this will copy the screenshot into the spritesheet memcpy(0,0x8000,0x2000) --this resets the spritesheet to it's original state reload(0,0,0x2000)</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>And here is the cart for you to download</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_method3true-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Method 3 True Clipping Mask</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <h3>Pros</h3> <ul> <li>Can be the quickest method</li> <li>Uses no sprites</li> <li>Super versatile</li> </ul> <h3>Cons</h3> <ul> <li>Math overload can cause nosebleed</li> <li>Circle with a small radius looks square-ish</li> </ul> <h1>Method 4: Video Remapping Stencil</h1> <p>Method 3 was complicated. Method 4 sure SOUNDS complicated but as you will see the code is fairly simple and compact. Method 4 is all about exploiting 0.2.4 functionality to Video Remap and copy around screen contents to make Pico-8 do the heavy lifting for us. Ultimately what we're aiming to achieve is to use the regular CIRCFILL() function to draw a solid circle and &quot;punch out&quot; that circle by setting the circle's color to transparent while drawing it to the screen.</p> <p>Let's begin with the simple black background version of it. Here is the plan:</p> <ol> <li>Draw the Jelpi game screen</li> <li>Remap the spritesheet to become the screen. Paint the spritesheet all black.</li> <li>Draw a white circle on the spritesheet</li> <li>Reset video remapping to normal. Set white to transparent. Draw the <strong>entire spritesheet</strong> onto the screen.</li> <li>Reset the spritesheet to how it was before</li> </ol> <img style="" border=0 src="/media/16423/PLAN02.png" alt="" /> <p>This sounds complicated but this is what the entire AFTERDRAW() function looks like:</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 afterdraw() --remap spritesheet to become the screen poke(0x5f55,0) --fill the spritesheet with black palt(0,false) cls(0) --draw a white circle on the spritesheet circfill(myx,myy,myr,7) --video remapping back to normal poke(0x5f55,0x60) --set white to transparent palt(7,true) --draw the entire spritesheet to the screen sspr(0,0,128,128,0,0) --reset everything reload(0,0,0x2000) palt() 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>And it looks like this. Just a nice and clean Circular Clipping Mask.</p> <img style="" border=0 src="/media/16423/circ4a_0.gif" alt="" /> <p>Now this method has one disadvantage in that it takes a lot of processing power. We are copying and drawing large amounts of data for Pico-8 standards. So this may look like a mediocre trade. However, one huge advantage of this method is that we can have as many overlapping circular masks as we want at no additional cost. We achieve this my simply drawing a few more circles onto the spritesheet. Things can get pretty wild.</p> <img style="" border=0 src="/media/16423/method4 p8_0.gif" alt="" /> <p>The advantages here should be obvious. This can be a useful technique if we have a game where we need more than just one circular mask at any given time. For example: a dark level illuminated by multiple light sources.</p> <p>Here is the cart for you to download:</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_method4-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Method 4</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <h2>Fake Alpha with Method 4</h2> <p>We can use similar techniques to the ones discussed in Method 3 to achieve the Fake Alpha effect with Method 4. Here is the plan:</p> <ol> <li>Draw the Jelpi game to the screen</li> <li>Copy Screen contents to the spritesheet</li> <li>Remap the spritesheet to become the screen. Draw a white circle on the spritesheet</li> <li>Reset video remapping to normal. Set white to transparent. Shift the palette for the colors to become darker. Draw the <strong>entire spritesheet</strong> onto the screen</li> <li>Reset the spritesheet to how it was before</li> </ol> <img style="" border=0 src="/media/16423/PLAN03.png" alt="" /> <p>This is essentially the same procedure as the basic Method 4 except instead of filling the spritesheet with black we fill it with the contents of the screen. We also shift the palette darker when we draw the spritesheet back onto the screen. The advantages of Method 4 persist. We can still use multiple intersecting circular masks.</p> <img style="" border=0 src="/media/16423/method4b p8_0.gif" alt="" /> <p>Besides the already mentioned cases this could be potentially used for all sorts of decorative effects such as this canopy shadow effect in A Link to the Past.</p> <img style="" border=0 src="/media/16423/55_zeldaforestmsmol&ouml;.gif" alt="" /> <p>Here is the cart for you to download:</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_method4alpha-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Method 4 Fake Alpha</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <h2>True Clipping Mask with Method 4</h2> <p>And finally here is how to achieve a true Clipping Mask with Method 4. Which means we once again set DRAWMYBG to TRUE so the program renders the heart background before it renders the game. Our goal is to combine the two using the circular mask. Here is the plan:</p> <ol> <li>Draw the hart background to the screen</li> <li>Save a screenshot of the hart background to RAM</li> <li>Draw the Jelpi game to the screen</li> <li>Copy heart background screenshot from RAM to the spritesheet</li> <li>Remap the spritesheet to become the screen. Draw a white circle on the spritesheet</li> <li>Reset video remapping to normal. Set white to transparent. Draw the <strong>entire spritesheet</strong> onto the screen</li> <li>Reset the spritesheet to how it was before</li> </ol> <img style="" border=0 src="/media/16423/PLAN04.png" alt="" /> <p>If you've been following this post none of the methods should be new to you at this point. This is what the result looks like.</p> <img style="" border=0 src="/media/16423/method4c p8_0.gif" alt="" /> <p>And here is the cart for you to download and look at the code</p> <p> <table><tr><td> <a href="/bbs/?pid=105554#p"> <img src="/bbs/thumbs/pico8_circular_mask_method4true-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=105554#p"> Circular Mask Method 4 True Clipping Mask</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=105554#p"> [Click to Play]</a> </td></tr></table> </p> <h3>Pros</h3> <ul> <li>Fairly short</li> <li>Uses no sprites</li> <li>Circles look clean at any size</li> <li>Allows multiple intersecting masks</li> <li>Versatile</li> </ul> <h3>Cons</h3> <ul> <li>CPU intensive</li> <li>Tapping into weird tech</li> </ul> <h1>Performance</h1> <p>Here is the 30FPS CPU load I got on the above carts.</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>Just Jelpi : 18% Method 1 : 7% - 25% Method 2 : 7% - 29% Method 3 : 7% - 20% Method 3 Alpha : 34% - 28% Method 3 True : 62% - 67% Method 4 : 53% Method 4 Alpha : 56% Method 4 True : 64%</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>Method 3 appears to be the most efficient one. Method 4 is flexible and simple but the high CPU load means it's prohibitive to use in 60FPS unless it can be effectively optimized for it's use case. Generally, using the Fake Alpha and True Clipping Mask trick is heavy on the CPU and needs to be used with caution.</p> <h1>Sources</h1> <p>None of the methods I've described here are my own ideas. So at this point I wanted to give big thanks to all the people that I've learned those techniques from. The people I'm listing here aren't necessarily the original creators. They are just the people I've learned them from myself.</p> <p>A good example for this is Method 1. I'm sure others had a similar idea before. But I've first seen it in use by one of my own students! <a href="https://www.lexaloffle.com/bbs/?uid=33184"> @xCoraNil</a> used this effectively in their game <a href="https://www.lexaloffle.com/bbs/?pid=60144#p">Night of the Worm Slayer</a>.</p> <p>Method 2 is something I've recently seen <a href="https://twitter.com/im_sticky/status/1479257354956722178">in a Twitter post</a> by <a href="https://www.lexaloffle.com/bbs/?uid=59846"> @sticky</a>.</p> <p>Method 3 I've first seen in in <a href="https://www.lexaloffle.com/bbs/?tid=35310">this excellent post on this subject</a>. It was <a href="https://www.lexaloffle.com/bbs/?uid=25532"> @freds72</a> who <a href="https://www.lexaloffle.com/bbs/?pid=67765#p">suggested doing it like this</a> and I was pretty surprised about how simple the core math formula was.</p> <p>Method 4 is something <a href="https://www.lexaloffle.com/bbs/?uid=25604"> @NMcCoy</a> suggested <a href="https://twitter.com/NMcCoy/status/1466776670161932290">in a Twitter conversation not long ago</a>. </p> <h1>It's Your Turn!</h1> <p>This was a long post. Now it's your turn!</p> <ul> <li>Try the different methods out. Post Results!</li> <li>None of the code is optimized for speed or for tokens yet. I'd love some help with that!</li> <li>Do you have ideas for your own methods? Post them here as well!</li> </ul> <p>Let's build a repository of tools to tackle this recurring problem! </p> https://www.lexaloffle.com/bbs/?tid=46286 https://www.lexaloffle.com/bbs/?tid=46286 Sun, 30 Jan 2022 13:36:08 UTC Video: How to upload Pico-8 games to Itch.io, Newgrounds and the Lexaloffle BBS <p>Three step by step tutorials on how to get your games onto the 3 most interesting Pico-8 platforms. The itch ones goes into basic details on how to design your page too!</p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/cvBnl32Ku5Y&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/cvBnl32Ku5Y&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/cXaqrK7yl9U&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/cXaqrK7yl9U&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/GzSjOUg7P_M&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/GzSjOUg7P_M&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> https://www.lexaloffle.com/bbs/?tid=44640 https://www.lexaloffle.com/bbs/?tid=44640 Thu, 16 Sep 2021 02:20:14 UTC High Stakes <p> <table><tr><td> <a href="/bbs/?pid=83548#p"> <img src="/bbs/thumbs/pico8_highstakes-2.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=83548#p"> highstakes</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=83548#p"> [Click to Play]</a> </td></tr></table> </p> <img style="" border=0 src="/media/16423/PYSg81.gif" alt="" /> <img style="" border=0 src="/media/16423/X71W7P.gif" alt="" /> <p><em>Las Vegas 2024. Vampires have stolen your blood. Play the card game of your life and win it all back.</em></p> <h1>Rules</h1> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/3mIHLKRDQgg&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/3mIHLKRDQgg&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> <p>Every round you will be dealt 9 cards face-down. The goal of the game is to flip as many cards face-up as possible. There is one Vampire card and 8 value cards ranging from 2 to 9. There is always only one copy in each card on the board. If you flip the Vampire card you lose the round.</p> <img style="" border=0 src="/media/16423/help_layout.png" alt="" /> <p>Complete rows or columns to unlock Hint Tokens.</p> <ul> <li> <p>​A [+] hint token can be placed on a face-down card to predict its number. The token will display a number once placed. The value of the face-down card is that number or higher. Vampire cards count as 10. So a [8+] token means the card is either a 9, an 8 or a Vampire​</p> </li> <li> <p>A [&lt;&gt;] token can be placed on a face-up card to predict the numbers of adjacent face-down cards. The token will show which adjecent cards have a higher or lower value. Vampire cards count as 10.</p> </li> <li>A [□] hint token will highlight a 2x2 area. The Vampire card must be in that area.</li> </ul> <p>If you think you know where the Vampire card is you can use the Stake to stab it immediately for more points.</p> <p>Flipping a card will raise the stakes. If you flip over all value cards or stab the Vampire the stakes will be added to your winnings. If you flip the Vampire the stakes will be substracted from your winnings.</p> <p>You can use the button in the lower left corner to pass a round. You will keep the stakes but you need to pay a penalty of the value of two card flips.</p> <p>Each match lasts 5 rounds.</p> <p>Use the blood you win to unlock opponents with higher payouts. You win the game if your reach 5000ml. Your progress will be saved between matches. But if you lose all your blood your savegame will be wiped and you need to start over.</p> <h1>Credits</h1> <p>This game was created as part of the <a href="https://itch.io/jam/a-game-by-its-cover-2020">A Game By Its Cover Jam 2020</a>. The goal was to create a game based on of the cartridge covers from the <a href="http://famicase.com/20/index.html">Famicase Exhibition 2020</a>. <a href="http://famicase.com/20/softs/086.html">The cover to High Stakes</a> was created by <a href="https://twitter.com/tandyq">Tyler Q Anderson and Jamie C Lee</a>.</p> <p>The music was composed by <a href="https://twitter.com/gruber_music">Gruber Music</a>.</p> <p>The game was written and designed by me ;). Enjoy!</p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/IrEdLmDKuAU&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/IrEdLmDKuAU&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> https://www.lexaloffle.com/bbs/?tid=40099 https://www.lexaloffle.com/bbs/?tid=40099 Sat, 31 Oct 2020 17:34:02 UTC memsplore <p> <table><tr><td> <a href="/bbs/?pid=80908#p"> <img src="/bbs/thumbs/pico8_memsplore-3.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=80908#p"> memsplore</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=80908#p"> [Click to Play]</a> </td></tr></table> </p> <h1>MEMSPLORE</h1> <p>I made this little tool to visualize and edit PICO-8's memory. The app has 3 modes</p> <p>(From Right to Left)</p> <ul> <li><strong>LIST MODE</strong> - Shows addresses in a list. Parses the content of the memory as decimal, hexadecimal and binary numbers. Also renders the value as a character.</li> <li><strong>HEX MODE</strong> - Shows addresses as hexadecimal numbers with 6 entries in each row. Also renders the values as a line of pixels.</li> <li><strong>DOT MODE</strong> - Shows addresses as sequence of dots with 8 entries in each row. Unlike the other two modes this doesn't allow you to edit the numbers and is only for visualization purposes.</li> </ul> <p>In addition each mode has two tools to find a specific address:</p> <ul> <li><strong>MAP</strong> - Shows a simplified map of the memory. It's a pattern of boxes. Each box represents 32 bytes. Clicking on a box will jump to that address. The shortcut is M.</li> <li><strong>JUMP</strong> - Allows you to enter a hexadecimal address directly. The shortcut is J.</li> </ul> <p>Let me know if there are some errors. Let me also know if there are any features that you'd really love to have.</p> <p>(Tilemap contains a partial artwork originally by <a href="https://www.lexaloffle.com/bbs/?uid=11477"> @johanvinet</a>)</p> <p>Change Log:</p> <p>0.0.1 - Initial Release<br /> 0.0.2 - Added description to button mapping (0x5F4C - 0x5F53). Tweaked description to 0x5F33 and 0x5F34.<br /> 0.0.3 - Added new addresses for the 0.2.2 release - Custom Font and Print Attributes. Fixed a bug where random beeps would be heard in list mode. Splash screen now only shows up once a day.<br /> 0.0.4 - Updated for 0.2.4</p> https://www.lexaloffle.com/bbs/?tid=39274 https://www.lexaloffle.com/bbs/?tid=39274 Tue, 18 Aug 2020 08:13:36 UTC Feature Request: Mouse-Over Pixel Preview when drawing <p>Not a bug but a feature request since Zep is still adding features on 0.2.0j. It would be great if the drawing tool would show a preview of the pixel you are about to draw as the cursor moves into the canvas. Here is a gif of what I mean:</p> <img style="" border=0 src="/media/16423/8_GIF.gif" alt="" /> <p>This is the default setting in programs like Aseprite. It helps judging the scale and placement of pixels especially when the canvas is blank. I'm so used to it from Aseprite and I really miss this when I jump into Pico-8 to touch up things.</p> https://www.lexaloffle.com/bbs/?tid=38173 https://www.lexaloffle.com/bbs/?tid=38173 Thu, 28 May 2020 14:46:14 UTC Can't copy SFX between carts when in the SFX / Music Organiser <p>Not necessarily a bug - just unexpected behavior / missing functionality in 0.2.0i.</p> <p>When in the new SFX / Music Organiser and switching to SFX view it is possible to copy and paste SFX around within the loaded cart cart. However, when you copy an SFX in this mode you can't paste it into another cart. Instead it will paste the pattern.</p> <p>It an odd case. It technically makes sense because this is still the Pattern view. But subjectively, by switching into the Organiser and to SFX it becomes a very SFX-focused interface. So I would expect to be able to copy SFX from here and paste them to other carts.</p> <p>This is especially the case since this view lends itself very well to a typical use scenario I encounter often. Let's say I have an old game that I want to re-use some sound effects from. I would fire up the SFX Organiser, shift-select the SFX I want and copy and paste them to a new project.</p> <p>While we're at it, I also have a feature request - it would be great if there was a visual indicator in this view to distinguish SFX that are used in patterns and SFX that aren't used in any pattern. This would help quickly identify whether an SFX is music or a sound effect. Perhaps a border or a different-colored background?</p> https://www.lexaloffle.com/bbs/?tid=38021 https://www.lexaloffle.com/bbs/?tid=38021 Mon, 18 May 2020 17:13:28 UTC CPU working animation doesn't show up <p>The changelog to v0.2.0e says</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>Added: cpu working animation when cpu usage &gt; 120 skipped frames</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>I made a program to test this behavior. Can't make the animation show up no matter how how high the CPU value gets. Confirmed by independent tester using their own code. Are we doing something wrong or is this a bug? We used v0.2.0i.</p> <img style="" border=0 src="/media/16423/GIF.gif" alt="" /> <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 _init() y=1 g=0 end function _draw() cls() print(time(),8,8) print(g,8,16) print(y,8,24) end function _update() for i=0,32000 do for o=0,y do g=sin(rnd()) end end y+=1 end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> https://www.lexaloffle.com/bbs/?tid=38019 https://www.lexaloffle.com/bbs/?tid=38019 Mon, 18 May 2020 16:30:08 UTC HTML5 template doesn't work on iPhone 6S <p>This is a game exported to HTML5 with 0.2.0i. I opened it in an iPhone 6S using Safari. It's using iOS 13.4.1.</p> <img style="" border=0 src="/media/16423/ezgif.com-optimize.gif" alt="" /> <p>The game seems to run fine. But the buttons are unresponsive. The menu button is rendered on top of the game. After wild tapping I was able to trigger an X button press. But I can't reproduce this reliably.</p> <p>The HTML + JS files were uploaded directly to my web server here:<br /> <a href="http://www.ceeu.de/picotest">http://www.ceeu.de/picotest</a></p> <p>I experienced the same problem when uploading the files to itch.io.</p> <hr /> <p>While we are here. I have a different problem when running on an older iPad Mini:</p> <img style="" border=0 src="/media/16423/ezgif.com-optimize (1).gif" alt="" /> <p>A tiny icon of the game in the middle of the screen. Doesn't react to taps at all. Can't launch game.</p> <p>This one uses iOS 9.3.5. A bit old so I didn't expect much anyway.</p> https://www.lexaloffle.com/bbs/?tid=38018 https://www.lexaloffle.com/bbs/?tid=38018 Mon, 18 May 2020 16:11:06 UTC Moving sprites in the spritemap doesn't undo properly <p>One of the new features on 0.2.0 is moving sprites in the spritemap. This can be done in the map view with ctrl-x and ctrl-v. The map will be updated accordingly.</p> <p>However, this won't undo properly. The map will revert but not the spritemap. See gif:</p> <img style="" border=0 src="/media/16423/PICO-8_0.gif" alt="" /> <p>Tested in 0.2.0i</p> https://www.lexaloffle.com/bbs/?tid=38016 https://www.lexaloffle.com/bbs/?tid=38016 Mon, 18 May 2020 15:37:06 UTC Porklike <p> <table><tr><td> <a href="/bbs/?pid=73825#p"> <img src="/bbs/thumbs/pico8_porklike-2.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=73825#p"> porklike</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=73825#p"> [Click to Play]</a> </td></tr></table> </p> <img style="" border=0 src="/media/16423/tut_basics.png" alt="" /> <img style="" border=0 src="/media/16423/tut_basics2.png" alt="" /> <h1>Porklike</h1> <p>Porklike is a minimalistic, classic Roguelike made in the Pico-8 enigne. Enter the tower of Wurstlord. Can you make it to the top and steal his legendary Kielbasa? 9 floors of dangerous traps and enemies await you. Only if you move carefully and master your character's abilities will you become the champion of Porklike.</p> <p>(X) - Inventory / Confirm<br /> (O) - Cancel</p> <p>The music was composed by <a href="http://sebastianhassler.de/">Sebastian Ha&szlig;ler</a>. The environment art as well as the protagonist was inspired by the work of the pixel artist <a href="https://twitter.com/PixelArtM"><a href="https://www.lexaloffle.com/bbs/?uid=10027"> @pixelartm</a></a> and used with their permission. The artwork of the enemies was inspired by the work of the pixel artist <a href="https://twitter.com/kirai_s">@kirai_s</a> and used with their permission as well.</p> <p>Porklike was created as part of a <a href="https://www.youtube.com/watch?v=HnY7Inp74dw">video tutorial series</a>. If you want to make your own Roguelike, please check it out:</p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/HnY7Inp74dw&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/HnY7Inp74dw&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> https://www.lexaloffle.com/bbs/?tid=37045 https://www.lexaloffle.com/bbs/?tid=37045 Wed, 11 Mar 2020 16:43:20 UTC ClockworkPI GameShell - The Best PICO-8 Handheld? <p>Here is my recent video review of the GameShell from the perspective of a PICO-8 enthusiast</p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/FyEKgD9d770&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/FyEKgD9d770&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> https://www.lexaloffle.com/bbs/?tid=34159 https://www.lexaloffle.com/bbs/?tid=34159 Wed, 08 May 2019 23:10:27 UTC Video Tutorial - Making a Roguelike in Pico-8 <p>Today I am starting a new tutorial series on how to make a Roguelike in Pico-8. New episodes will be released throughout February. Hopefully, we will be done before the <a href="https://itch.io/jam/7drl-challenge-2019">7-Day Roguelike Challenge 2019</a> begins. The series is designed to give you the skills and tools to participate in that challenge. </p> <p><img style="" border=0 src="https://www.lexaloffle.com/bbs/files/16423/pork_thumb2.png" alt="" /> <img style="" border=0 src="https://www.lexaloffle.com/bbs/files/16423/pork_gif_7.gif" alt="" /> <img style="" border=0 src="https://www.lexaloffle.com/bbs/files/16423/porkintro.gif" alt="" /> <img style="" border=0 src="https://www.lexaloffle.com/bbs/files/16423/pork_2.gif" alt="" /></p> <p>If you have any questions of feedback you can post them in this thread.</p> <p><a href="https://www.youtube.com/playlist?list=PLea8cjCua_P3LL7J1Q9b6PJua0A-96uUS">Here is the full playlist</a></p> <p>Here are the videos:</p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/HnY7Inp74dw&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/HnY7Inp74dw&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> <p><a href="https://www.youtube.com/watch?v=SoFOva5FUnI">#2 - Basic Movement</a><br /> <a href="https://www.youtube.com/watch?v=CO1qTJMH8mU">#3 - Animation</a><br /> <a href="https://www.youtube.com/watch?v=1ZUhxXQiDCA">#4 - Token Optimization</a><br /> <a href="https://www.youtube.com/watch?v=PnE5S4DoNEg">#5 - Wall Collision</a><br /> <a href="https://www.youtube.com/watch?v=y3uNmCL414M">#6 - Object Interaction</a><br /> <a href="https://www.youtube.com/watch?v=6G2StWNTFlo">#7 - Text Boxes</a><br /> <a href="https://www.youtube.com/watch?v=XuT3nwDuRiw">#8 - Message System</a><br /> <a href="https://www.youtube.com/watch?v=rjWxDQcYUwo">#9 - Monsters</a><br /> <a href="https://www.youtube.com/watch?v=CSIHQElMdF0">#10 - Mob System</a><br /> <a href="https://www.youtube.com/watch?v=FvSLsmTCIO4">#11 - Combat</a><br /> <a href="https://www.youtube.com/watch?v=qLIPY0ro5UY">#12 - Simple Pathfinding</a><br /> <a href="https://www.youtube.com/watch?v=1jQJQ_l4geM">#13 - Death</a><br /> <a href="https://www.youtube.com/watch?v=LIlFLoU9S1w">#14 - HP Display</a><br /> <a href="https://www.youtube.com/watch?v=eTdD1vRC9OY">#15 - AI</a><br /> <a href="https://www.youtube.com/watch?v=QF5jZWAhl1s">#16 - Fog of War</a><br /> <a href="https://www.youtube.com/watch?v=0cTutS4CC5c">#17 - Fog Polish</a><br /> <a href="https://www.youtube.com/watch?v=VRxd1oDsvx4">#18 - Token Tweaks</a><br /> <a href="https://www.youtube.com/watch?v=zA1uMY5f4Js">#19 - Pathfinding</a><br /> <a href="https://www.youtube.com/watch?v=D54YMXRrS5I">#20 - Path Tweaking</a><br /> <a href="https://www.youtube.com/watch?v=QAP5bPkuIdc">#21 - Inventory UI</a><br /> <a href="https://www.youtube.com/watch?v=Ku_xe6wXdvs">#22 - Use Menu</a><br /> <a href="https://www.youtube.com/watch?v=15Yw4gzqHX8">#23 - Equipment</a><br /> <a href="https://www.youtube.com/watch?v=pLa-GoNzvfI">#24 - Eating</a><br /> <a href="https://www.youtube.com/watch?v=dtiSXv1YD7w">#25 - Throw UI</a><br /> <a href="https://www.youtube.com/watch?v=fWDi8G2In9k">#26 - Throwing</a><br /> <a href="https://www.youtube.com/watch?v=yOrDUsF1OpI">#27 - Gameplay Test</a><br /> <a href="https://www.youtube.com/watch?v=3sWIQocOoq8">#28 - Random Rooms</a><br /> <a href="https://www.youtube.com/watch?v=LV0OhUWMCg8">#29 - Signature</a><br /> <a href="https://www.youtube.com/watch?v=zX0qNqWeoQk">#30 - Signature Mask</a><br /> <a href="https://www.youtube.com/watch?v=OUWNiOxVbYs">#31 - Worm</a><br /> <a href="https://www.youtube.com/watch?v=TILFOPcS5GM">#32 - Merging Areas</a><br /> <a href="https://www.youtube.com/watch?v=b2GMyOZRXOM">#33 - Shortcuts</a><br /> <a href="https://www.youtube.com/watch?v=cuTet3kI51o">#34 - Stairs</a><br /> <a href="https://www.youtube.com/watch?v=YnetPcmmVXw">#35 - Floors</a><br /> <a href="https://www.youtube.com/watch?v=JCVTI0ve9KU">#36 - Shepherding</a><br /> <a href="https://www.youtube.com/watch?v=mO49X3Jrmy8">#37 - Hub Floor</a><br /> <a href="https://www.youtube.com/watch?v=KT72ydigoxk">#38 - Optimizations</a><br /> <a href="https://www.youtube.com/watch?v=y4wcaXzhAdM">#39 - Tile Borders</a><br /> <a href="https://www.youtube.com/watch?v=VHCMLoeZG2s">#40 - Pretty Walls</a><br /> <a href="https://www.youtube.com/watch?v=ZYFdJSMMdN8">#41 - Wall Overlap</a><br /> <a href="https://www.youtube.com/watch?v=SHCGjkdBx3g">#42 - Decorations</a><br /> <a href="https://www.youtube.com/watch?v=rdoanMNlu24">#43 - Managing Stats</a><br /> <a href="https://www.youtube.com/watch?v=cNJtErJwhZ8">#44 - More Monsters</a><br /> <a href="https://www.youtube.com/watch?v=--jn8PfA7BY">#45 - Chests</a><br /> <a href="https://www.youtube.com/watch?v=so_YhJk34FU">#46 - Random Food</a><br /> <a href="https://www.youtube.com/watch?v=Sq1B-_WsXIk">#47 - Curses</a><br /> <a href="https://www.youtube.com/watch?v=jg9E9DM5270">#48 - Stats</a><br /> <a href="https://www.youtube.com/watch?v=7OPJ_QXaRUU">#49 - Freestanding</a><br /> <a href="https://www.youtube.com/watch?v=PCaW7PoEKRo">#50 - Bugfixing</a></p> <p>Final Video:<br /> <object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/9BMSGNd39Uk&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/9BMSGNd39Uk&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> https://www.lexaloffle.com/bbs/?tid=33121 https://www.lexaloffle.com/bbs/?tid=33121 Fri, 01 Feb 2019 20:31:53 UTC Sanki <p> <table><tr><td> <a href="/bbs/?pid=60057#p"> <img src="/bbs/thumbs/pico8_sanki-2.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=60057#p"> Sanki</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=60057#p"> [Click to Play]</a> </td></tr></table> </p> <h1>Sanki</h1> <p>It's winter. Let's go sledding. Ride the slope until you stop or crash.</p> <h2>Controls</h2> <p>x/z - confirm<br /> arrow keys - you can turn your sled in the air to pull of some sweet tricks</p> <p>This is not a game in the traditional sense. There is no score or goal. Just give yourself a minute or two to unwind and enjoy the ride. Happy Holidays!</p> <h2>But what does Sanki mean?</h2> <p>&quot;Sanki&quot; is Polish for &quot;sledding&quot;. I grew up in a high-rise suburb of Warsaw. We used to have a lot of snow in winter. Some of my most cherished childhood memories are about going sledding with my friends and family. It was something that brought the entire community together just to have fun and spend time with each other. For some reason this has stuck with me more than the actual Christmas celebrations. It was the inspiration for this little project.</p> <h2>Credits</h2> <p>Design/Art/Code: Krystian Majewski (<a href="https://twitter.com/krystman"><a href="https://www.lexaloffle.com/bbs/?uid=16423"> @Krystman</a></a>)<br /> Music: Chris Donnelly (<a href="https://twitter.com/gruber_music">@gruber_music</a>)</p> <h2>About Pico-8 Advent Calender</h2> <p>During December, each day will be filled with new and exciting PICO-8 games! We have gathered 25 great developers from the PICO-8 community and we have worked hard to make some new games. Each day leading up to Christmas, there will be a new surprise for you!</p> <p>Find out more at: <a href="https://pico8-advent.tumblr.com/">https://pico8-advent.tumblr.com/</a></p> <p>And check out the Pico-8 Advent Calendar each day for a new surprise: <a href="https://www.lexaloffle.com/bbs/?tid=32388">https://www.lexaloffle.com/bbs/?tid=32388</a></p> https://www.lexaloffle.com/bbs/?tid=32594 https://www.lexaloffle.com/bbs/?tid=32594 Tue, 18 Dec 2018 06:29:38 UTC Mai-Chan's Sweet Buns <p> <table><tr><td> <a href="/bbs/?pid=56575#p"> <img src="/bbs/thumbs/pico56576.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=56575#p"> Mai-Chan's Sweet Buns</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=56575#p"> [Click to Play]</a> </td></tr></table> </p> <p>Mai-Chan's Sweet Buns is a cute puzzle game about pastries. Our goal is to help Mai-Chan serve her sweet buns to customers at her bakery. </p> <p>This game was created as part of the A Game By Its Cover Jam 2018.<br /> <a href="https://itch.io/jam/a-game-by-its-cover-2018">https://itch.io/jam/a-game-by-its-cover-2018</a></p> <p><img style="" border=0 src="https://img.itch.zone/aW1hZ2UvMjk0MzM1LzE0ODg1MDYuZ2lm/347x500/UeTQLJ.gif" alt="" /><img style="" border=0 src="https://img.itch.zone/aW1hZ2UvMjk0MzM1LzE0ODg1MDguZ2lm/347x500/66N%2B0Z.gif" alt="" /></p> <p><strong>How to Play</strong></p> <p>Dpad (Arrow keys) - Move Cursor<br /> X Button (X or M or V) - Confirm. Serve pastry.<br /> O Button (Z or N or C) - Cancel. Turn cursor.</p> <img style="" border=0 src="https://img.itch.zone/aW1nLzE0OTM1MzIucG5n/original/zdxQXd.png" alt="" /> <p>The 4 cards at the bottom of the screen represent the orders of the customers. Our task is to find and select a line of pastries on the board that matches one of the cards. We can select vertical or horizontal lines. But it needs to be an uniterrupted line of the same pastry.</p> <img style="" border=0 src="https://img.itch.zone/aW1nLzE0OTM1MjMucG5n/original/1CDh5i.png" alt="" /> <p>We can only serve lines of pastries that perfectly match one of the cards. Some orders are easy to satisfy - like the x1 oders. Others may require some setup - like the x3 orders.</p> <p>If we ever get stuck, we can look into the magical Star Box to activate special powers. Special powers cost stars. We can gain more stars by aligning 4 of the same pastry in a row.</p> <p>We lose the game if we get stuck and run out of stars. But if we manage to serve all of the order cards in the deck, we win!</p> <p><strong>Some Background</strong></p> <p>This game was created as part of the A Game By Its Cover Jam 2018. The goal was to create a game based on of the cartridge covers from the Famicase Exhibition 2018. The cover to Mai-Chan's Sweet Buns was created by Louis Lloyd-Judson.<br /> <a href="https://twitter.com/Louistrations">https://twitter.com/Louistrations</a></p> <p>He's the artist of the webcomic Apricot Cookies.<br /> <a href="https://apricotcookies.net/">https://apricotcookies.net/</a></p> <img style="" border=0 src="https://img.itch.zone/aW1nLzE0ODk5NTcucG5n/original/mEvUkp.png" alt="" /> <p>I've livestreamed the entire process here. It seems like it took around 100 hours.</p> <p><object width="640" height="400"><param name="movie" value="https://www.youtube.com/v/zRw2FzjsweQ&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/zRw2FzjsweQ&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="400"></embed></object></p> <p>The entire playlist is here:<br /> <a href="https://www.youtube.com/playlist?list=PLea8cjCua_P1taIqeYv6mKVdIfIZLFZGK">https://www.youtube.com/playlist?list=PLea8cjCua_P1taIqeYv6mKVdIfIZLFZGK</a></p> <p>The music was made by my friend Sebastian Ha&szlig;ler<br /> <a href="https://twitter.com/sebashas">https://twitter.com/sebashas</a></p> https://www.lexaloffle.com/bbs/?tid=31864 https://www.lexaloffle.com/bbs/?tid=31864 Wed, 12 Sep 2018 14:00:55 UTC Breakout Hero <p> <table><tr><td> <a href="/bbs/?pid=53977#p"> <img src="/bbs/thumbs/pico53976.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=53977#p"> Breakout Hero</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=53977#p"> [Click to Play]</a> </td></tr></table> </p> <p>A juicy remake of Breakout/Arkanoid with 15 levels and a highscore list. Created as part of a long-running video tutorial series. If you want to learn how to make a game like this, <a href="https://www.lexaloffle.com/bbs/?tid=28030">check out this thread</a>!</p> <p><strong>How to play</strong></p> <p>You control the pad at the bottom of the screen. You need to destroy the bricks by hitting them with a ball. If the ball leaves the bottom of the screen you lose. You need to move your pad left and right to keep the ball on the screen.</p> <p>If you move the pad while you hit the ball, you can change the angle of the ball's trajectory. There are also different powerups, which appear when you destroy a blue block.</p> <p><strong>Powerups</strong></p> <p>Orange = Slow - Slows down time<br /> White = Life - Gives you an additional extra life<br /> Green = Sticky - Makes you pad sticky. It makes the ball stick to the paddle so you can launch it again<br /> Blue = Expand - Expands the size of your pad<br /> Black = Reduce - Shrinks you pad but also gives you a 10x score modifier<br /> Red = Megaball - Lets the ball smash through blocks without changing direction<br /> Yellow = Multiball - Splits the ball into two balls. You only lose a life if you lose your last ball</p> <p>Sudden Death - if there are only 3 bricks left when the ball hits the pad, the game goes into Sudden Death mode. Bricks will start blinking as they are about to explode. If you hit a brick while it's blinking, you'll get extra points.</p> <p><strong>Scoring</strong></p> <p>Hitting multiple bricks in a row increases your score multiplier to a maximum of 7x. Hitting the ball with the pad resets the multiplier back to 1x.</p> <p>Losing all lives resets your score to 0, but you can continue playing. For the highest score possible, try finishing the game without losing your lives.</p> <p>For an additional challenge and even more points, press up or down on the start screen for Fast Mode.</p> <p>Let me know if you see any bugs. Otherwise, Enjoy!</p> https://www.lexaloffle.com/bbs/?tid=31484 https://www.lexaloffle.com/bbs/?tid=31484 Fri, 06 Jul 2018 17:02:10 UTC Pico Checkmate <p> <table><tr><td> <a href="/bbs/?pid=52226#p"> <img src="/bbs/thumbs/pico54038.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=52226#p"> Pico Checkmate</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=52226#p"> [Click to Play]</a> </td></tr></table> </p> <p>A simple, cute retro version of classic Chess made in Pico-8. Full implementation of almost all of the Chess rules with a juicy interface and some basic AI to play against. Created as part of the <a href="https://itch.io/jam/chess-jam">Chess Jam 2018</a>. Here is the game's entry on <a href="https://krystman.itch.io/pico-checkmate">itch.io</a>. </p> <p><img style="" border=0 src="https://i.imgur.com/GFIJUEl.gif" alt="" /> <img style="" border=0 src="https://i.imgur.com/UAfw00P.gif" alt="" /> </p> <p>Jucy animations were very important to me. My Chess AI will never be competetive. So I focused on the game being pretty, readable and fun to play. I wanted to add even more functions but sadly, I ran out of tokens. I tried to squeeze in as many as I could.</p> <p><img style="" border=0 src="https://i.imgur.com/jcYfjqz.gif" alt="" /> <img style="" border=0 src="https://i.imgur.com/eTAt9JO.gif" alt="" /></p> <p>That being said, the Chess AI is kicking my butt. Let me know if you've beaten it. Not sure how smart it really is - my Chess is rusty. Also, let me know if you find any bugs. </p> <p>Note: Game will not recognize draw by <a href="https://en.wikipedia.org/wiki/Threefold_repetition">Threefold repetition</a>.</p> https://www.lexaloffle.com/bbs/?tid=31213 https://www.lexaloffle.com/bbs/?tid=31213 Tue, 01 May 2018 12:55:28 UTC @zep: Windows touchscreen support request <p>I'm using a Microsoft Surface Pro. I noticed that Pico-8 doesn't respond correctly to touch events. This affects the use of the touchscreen as well as the use of a stylus. I'm using the Surface Pen.</p> <p>Although you can control the cursor with touch inputs, triggering clicks is difficult. Tap events aren't registered as click. They move the mouse cursor but don't click. Tap and drag is correctly recognized as click and drag. So in order to click you need to basically draw tiny circles with the pen. </p> <p>I would love to use the pen as a convenient way to do some Pico-8 pixelart on the go.</p> https://www.lexaloffle.com/bbs/?tid=30990 https://www.lexaloffle.com/bbs/?tid=30990 Fri, 23 Mar 2018 14:34:20 UTC Breakout Hero (Beta) <p> <table><tr><td> <a href="/bbs/?pid=49663#p"> <img src="/bbs/thumbs/pico52365.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=49663#p"> Breakout Hero (Beta)</a><br><br> by <a href="/bbs/?uid=16423"> Krystman</a> <br><br><br> <a href="/bbs/?pid=49663#p"> [Click to Play]</a> </td></tr></table> </p> <p><strong>It's finally here!</strong>. Some of you may have seen the <a href="https://www.lexaloffle.com/bbs/?tid=28030">video tutorial I was working on over the year</a>. Well, the game is finally ready to be playtested!</p> <img style="" border=0 src="https://i.imgur.com/xKBQkIY.gif" alt="" /> <p><strong>How to play</strong></p> <p>The game is a straight-forward vanilla Breakout / Arkanoid clone. You need to destroy the bricks by hitting them with a ball. If the ball leaves the bottom of the screen you lose. You need to move your pad left and right to keep the ball on the screen. </p> <p>There are some finer details that make it more interesting. If you move the pad WHILE you hit the ball, you can change the angle of the ball's trajectory. The ball snaps to 3 different angles. There are also different powerups, which appear when you destroy a blue block.</p> <p><strong>Playtesting Help!</strong></p> <p>I need your help playtesting the game. There are 15 levels. I need players, who can beat the game. After the you've beaten the game, please go right on the High Score screen. You'll get a screen with numbers. Make a screenshot of that screen and post it here. They are various stats that I want to keep track of.</p> <img style="" border=0 src="https://i.imgur.com/EkbWLQL.gif" alt="" /> <p>Also - of course - please let me know if you encounter any bugs or weird behavior. Also, let me know what you would change about the game.</p> <p>Thanks in advance! Enjoy!</p> https://www.lexaloffle.com/bbs/?tid=30833 https://www.lexaloffle.com/bbs/?tid=30833 Sun, 25 Feb 2018 10:43:38 UTC Piracy Protection with 0.1.11g? <p>So I've heard talk about how the new version allows one to do some basic piracy protection. Presumably by reading the URL of the website a web players is embedded in. Not exactly sure how to implement this. Can anybody post some sample code?</p> https://www.lexaloffle.com/bbs/?tid=30598 https://www.lexaloffle.com/bbs/?tid=30598 Sat, 13 Jan 2018 07:25:02 UTC