LRP [Lexaloffle Blog Feed]https://www.lexaloffle.com/bbs/?uid=11901 vector movement demo <p>This is a simple demo of storing movement in speed and angle values instead of speed-x and speed-y. It shows a ball bouncing around inside a box.</p> <p> <table><tr><td> <a href="/bbs/?pid=39428#p"> <img src="/bbs/thumbs/pico39426.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=39428#p"> vector movement demo</a><br><br> by <a href="/bbs/?uid=11901"> LRP</a> <br><br><br> <a href="/bbs/?pid=39428#p"> [Click to Play]</a> </td></tr></table> </p> <p>Controls:<br /> up/down: change movement speed<br /> left/right: change movement angle<br /> x: pause movement<br /> z: randomize the movement angle</p> <p>Introduction to pico-8 angles:<br /> right: 0<br /> up: 0.25<br /> left: 0.5<br /> down: 0.75</p> <p>The speed of the ball is stored as ball.speed and the angle is stored as ball.angle. When the ball moves, the program uses sin() and cos(), along with the speed and angle, to calculate how far to move the ball in each direction (x/y movement).</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> dx=ball.speed*cos(ball.angle) dy=ball.speed*sin(ball.angle) </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 advantage of storing the speed and angle speed-x and speed-y is that they are easier to change directly than manipulating x-speed and y-speed. For example, when the ball bounces off a wall, you can just change the angle and know that the speed will stay the same.</p> <p>This demo calculates speed-x and speed-y every frame, which isn't really necessary. In a real program, you would probably want to store all four values: speed, angle, speed-x and speed-y, and only recalculate speed-x and speed-y when you change the speed or angle.</p> <p>In the bounce_ball() function, the angle you provide is the angle of reflection. For example, a vertical line has an angle of 0.25 (it goes straight up) and a horizontal line has an angle of 0.5 (it goes straight left). You can tweak these angles if you want the ball to bounce off at a different angle.</p> https://www.lexaloffle.com/bbs/?tid=29127 https://www.lexaloffle.com/bbs/?tid=29127 Sat, 08 Apr 2017 17:07:36 UTC Pico Jr dev kit <p>A while back, joshmillard posted <a href="https://www.lexaloffle.com/bbs/?tid=2248">Pico Jr</a>, a fantasy-console-within-a-fantasy-console based on these specs:</p> <p>&quot;- 48*48 pixel four-tone greyscale graphics (so, colors 0, 5, 6, and 7 in the PICO 8 palette)</p> <ul> <li>2 channel sound</li> <li>dpad and one button (other button could be reserved for meta-game/menu stuff)</li> <li>1 page of sprite sheet</li> <li>standard sprite size of 6x6 pixels</li> <li>dodgy slow-refresh LCD screen (could simulate this by checking screen buffer every frame and only allowing pixels to move one shade of grey toward whatever the target is)&quot;</li> </ul> <p>I extended Josh's prototype by overwriting most of the Pico-8 functions with wrappers that enforce the Pico Jr limits. For example, if you use pget(12,5), it will give you the value of pixel 12,5 on the Pico Jr screen instead of the Pico-8 screen. It will also give you a color from the Pico Jr palette of {0,1,2,3} instead of the actual Pico-8 values of {0,5,6,7}.</p> <p>Some functions have been disabled entirely, for example:</p> <ul> <li>No map support in Pico Jr</li> <li>No direct memory access (poke, peek, memcpy, etc.). Sorry tweet-jammers.</li> <li>No custom menus</li> <li>No cart data (for the time being)</li> </ul> <p>If you try to use any of the disabled functions, like memcpy() or map(), your code will crash with a syntax error.</p> <p>Other limitations to be aware of:</p> <ul> <li>I have hardly tested this at all. It's probably full of bugs.</li> <li>Put your code into the usual _init(), _update() and _draw() functions. Bare loops won't render correctly. (Sorry again, tweet-jammers.)</li> <li>Keep your code between the &quot;your code below&quot; / &quot;your code above&quot; blocks.</li> <li>Avoid using function or variable names that begin with two underscores (__). That's how all of the backend functions are named, and if you use that pattern yourself, you might end up overwriting something important.</li> <li>I didn't build in Josh's suggestion of 6x6 sprites. All the sprite functions are still based on standard 8x8 sprites.</li> </ul> <p>Here's Josh's original Jump Guy, updated for the new dev kit.</p> <p> <table><tr><td> <a href="/bbs/?pid=29418#p"> <img src="/bbs/thumbs/pico29416.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=29418#p"> Jump Guy</a><br><br> by <a href="/bbs/?uid=11901"> LRP</a> <br><br><br> <a href="/bbs/?pid=29418#p"> [Click to Play]</a> </td></tr></table> </p> <p>And here's an empty cart, ready for your next portable game:</p> <p> <table><tr><td> <a href="/bbs/?pid=29418#p"> <img src="/bbs/thumbs/pico30036.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=29418#p"> Pico Jr dev kit</a><br><br> by <a href="/bbs/?uid=11901"> LRP</a> <br><br><br> <a href="/bbs/?pid=29418#p"> [Click to Play]</a> </td></tr></table> </p> <p>I hope to come back to this and make an Asteroids clone or something. In the meantime, I hope this makes it easier to make more of these goofy mini-games.</p> https://www.lexaloffle.com/bbs/?tid=27747 https://www.lexaloffle.com/bbs/?tid=27747 Mon, 26 Sep 2016 02:09:43 UTC Short Text lowercase <p>A while back, RhythmLynx posted a couple <a href="https://www.lexaloffle.com/bbs/?tid=3059">lowercase fonts</a> that tried to use as little sprite space as possible. I had a lot of fun trying to pack the characters into overlapping regions on the sprite sheet to use even less sprite space.</p> <p>But, recently I had an idea to skip the sprite sheet entirely and define each character as binary data that can be stored as a number in a table. This is the result. Press z to swap between demo text and a reference guide. The reference guide is stored on the sprite sheet, but is not used for the lowercase print function.<br /> <table><tr><td> <a href="/bbs/?pid=28345#p"> <img src="/bbs/thumbs/pico28452.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=28345#p"> Short Text</a><br><br> by <a href="/bbs/?uid=11901"> LRP</a> <br><br><br> <a href="/bbs/?pid=28345#p"> [Click to Play]</a> </td></tr></table> </p> <p>Some explanation hidden...<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 /> A number in pico-8 is stored in 32 bits (4 bytes), something 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> 0 0000000 00000000 00000000 00000000 ^ ^^^^^^^ ^^^^^^^^ ^^^^^^^^ ^^^^^^^^ | | integer part | | decimal part | | negative sign </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 hexadecimal, the integer and decimal parts are separated by a period, just like in base 10.</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> a = 30.25 b = 0x1e.4 assert(a==b) </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 Short Text, each character is laid out on a 4x8 grid. Each column is then treated as a byte and joined together into a number. For example, the letter &quot;b&quot; looks like this, where . is a blank pixel and # is a used pixel:</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> #... #... ##.. #.#. ##.. .... .... .... </pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>Converted to binary, starting from the bottom right and working up then left, we turn this 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> 00000000 00001000 00010100 00011111 </pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>which, in hexadecimal, is written as 0x0008.141f, roughly 8.079.</p> <p>So, we build a table that assigns this number to B.</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> ... chars\[&quot;b&quot;\] = 0x0008.141f ... </pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>Then, when we want to draw b, we just check each bit in that number and draw the ones that are set onto the screen.<br /> </div></div></div></p> <p>Even though this method can store 4x8 characters, I only needed a 3x7 space for this font. I originally had a method that allowed me to store two characters per number, but the extra tokens necessary to handle the multi-letter storage outweighed the tokens gained by shortening the array.</p> <p>The final approach is more flexible and could be used to swap in any custom font, maybe even <a href="https://www.lexaloffle.com/bbs/?tid=27548">m7kenji's kana font</a>.</p> <p>Small Text also allows you to force a default character by inserting a backslash before the character. Be careful: the backslash also has to be escaped, so your string has to look like &quot;\e&quot; to draw a capital E.</p> https://www.lexaloffle.com/bbs/?tid=27636 https://www.lexaloffle.com/bbs/?tid=27636 Sun, 11 Sep 2016 19:04:52 UTC Writer! <p> <table><tr><td> <a href="/bbs/?pid=18682#p"> <img src="/bbs/thumbs/pico18680.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=18682#p"> Writer!</a><br><br> by <a href="/bbs/?uid=11901"> LRP</a> <br><br><br> <a href="/bbs/?pid=18682#p"> [Click to Play]</a> </td></tr></table> </p> <p>Introducing Writer!, the PICO-8 word processor that nobody asked for. Writer! would have been distributed with the PICO-8 (fantasy) keyboard peripheral, which plugs into both controller ports. Don't have a PICO-8 keyboard of your own? Your standard keyboard's WE, ASDF, XC and arrow keys should emulate the correct inputs.</p> https://www.lexaloffle.com/bbs/?tid=3048 https://www.lexaloffle.com/bbs/?tid=3048 Sun, 07 Feb 2016 00:09:06 UTC