Log In  
Follow
Krystman
Follow

I'm starting a tutorial on how to make your a Shmup in Pico-8 from scratch! It's for complete beginners.

The goal is to make a basic Shmup first and then slowly turn it into an AWESOME shmup!

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!

Episode 2 - Moving Stuff
Episode 3 - Controls
Episode 4 - Shooting
Episode 5 - Animation
Episode 6 - Health UI
Episode 7 - Starfield

P#111175 2022-05-02 07:30 ( Edited 2022-05-21 04:21)

Circular Clipping Masks

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:

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.

What is it and why do I need it?

Pico-8 has this function called CLIP(). 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.

There are many names for this effect. I call this a "Circular Clipping Mask" in this thread. But possible names could be also "Iris Out", "Circular Stencil", "Circular Matte", "Inverted Circle Fill", etc...

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 "dark level". You only render the environment around the player's character in order to simulate an environment with low visibility.

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 Closure or Schein.

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.

Workbench

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:

Cart #circular_mask_workbench-0 | 2022-01-24 | Code ▽ | Embed ▽ | No License
29

NOTE 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.

Changes I've made

  • Created a BEFOREDRAW() function and inserted it in the _DRAW() function just before the comment "-- decide which side to draw"
  • Created a AFTERDRAW() function and inserted it in the _DRAW() function at the very end
  • Commented out the CLIP() statement from the DRAW_WORLD() function so it doesn't interfere with my own clipping mask
  • 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.
  • Inside the BEFOREDRAW() function I calculate Jelpi's position on screen and save it in global variables
 myx=pl[1].x*8-cam_x
 myy=pl[1].y*8-cam_y-4

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!

Method 1: Big Dumb Sprite

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:

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.

This will give you more bang for your buck and you'll get a nice big circle.

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.

Your AFTERDRAW() function ends up looking like this. MYX and MYY are the coordinates of the center of the circle. MYR is the radius.

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

And here is the cart for you to download

Cart #circular_mask_method1-0 | 2022-01-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

Pros

  • Super simple. No crazy math or memory manipulation. If you know how to draw sprites in Pico-8 you can probably make this work.
  • Not limited to circles. You can easily make any clipping mask shape you want!

Cons

  • The scaling looks pixelated
  • You end up using precious sprite sheet space
  • It's not a REAL clipping mask. You can only turn the background into a solid color. You cannot seamlessly draw one image on top of another

Method 2: Bunch of Circles

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:

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.

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.

Something you need to pay attention to is how many circles you draw. As the clipping rectangle gets bigger there are more pixels to cover.

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:

Your AFTERDRAW() function ends up looking like this.

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

And here is the cart for you to download

Cart #circular_mask_method2-0 | 2022-01-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

Pros

  • Scales cleanly
  • Uses no sprites
  • Fairly simple

Cons

  • Feels a bit janky. Drawing whole bunch of overlapping circles just to cover the gaps.
  • Mask not perfectly circular. Ends up a bit egg-shaped.

Method 3: Math!

Ok, time to put our big boy pants on. It's time for Math! This method is something that some devs would maybe consider "the proper way" 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:

Cart #circular_mask_math-0 | 2022-01-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

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 Pythagoras Theorem 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:

y = sqrt(1 - x*x)

This equasion is going to be our "reference circle". 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 "slow-mo".

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:

Your AFTERDRAW() function ends up looking like this.

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

And here is the cart for you to download

Cart #circular_mask_method3-0 | 2022-01-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

Fake Alpha with Method 3

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 Pico 0.2.4.

Here is how the effect works. Instead of filling in just the corners of the clipping rectangle, we will fill the ENTIRE SCREEN 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 "slow-mo" and then in real-time):

This is a lot to take in but here is a commentated AFTERDRAW() function that hopefully steps you through the process

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)>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

And here is the cart for you to download

Cart #circular_mask_method3alpha-1 | 2022-01-30 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

True Clipping Mask with Method 3

So far, our clipping masks haven't been "real" 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.

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.

Here is how that will work.

  1. Draw the cute heart background
  2. 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.
  3. Draw the Jelpi game as normal
  4. Copy the screenshot we made earlier into the spritesheet
  5. 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.
  6. Reset the spritesheet to what it was before

This is what the effect looks like (first step 5 in "slow-mo" and then everything in real-time):

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.

 --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)

And here is the cart for you to download

Cart #circular_mask_method3true-1 | 2022-01-30 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

Pros

  • Can be the quickest method
  • Uses no sprites
  • Super versatile

Cons

  • Math overload can cause nosebleed
  • Circle with a small radius looks square-ish

Method 4: Video Remapping Stencil

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 "punch out" that circle by setting the circle's color to transparent while drawing it to the screen.

Let's begin with the simple black background version of it. Here is the plan:

  1. Draw the Jelpi game screen
  2. Remap the spritesheet to become the screen. Paint the spritesheet all black.
  3. Draw a white circle on the spritesheet
  4. Reset video remapping to normal. Set white to transparent. Draw the entire spritesheet onto the screen.
  5. Reset the spritesheet to how it was before

This sounds complicated but this is what the entire AFTERDRAW() function looks like:

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

And it looks like this. Just a nice and clean Circular Clipping Mask.

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.

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.

Here is the cart for you to download:

Cart #circular_mask_method4-1 | 2022-01-30 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

Fake Alpha with Method 4

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:

  1. Draw the Jelpi game to the screen
  2. Copy Screen contents to the spritesheet
  3. Remap the spritesheet to become the screen. Draw a white circle on the spritesheet
  4. Reset video remapping to normal. Set white to transparent. Shift the palette for the colors to become darker. Draw the entire spritesheet onto the screen
  5. Reset the spritesheet to how it was before

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.

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.

Here is the cart for you to download:

Cart #circular_mask_method4alpha-0 | 2022-01-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

True Clipping Mask with Method 4

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:

  1. Draw the hart background to the screen
  2. Save a screenshot of the hart background to RAM
  3. Draw the Jelpi game to the screen
  4. Copy heart background screenshot from RAM to the spritesheet
  5. Remap the spritesheet to become the screen. Draw a white circle on the spritesheet
  6. Reset video remapping to normal. Set white to transparent. Draw the entire spritesheet onto the screen
  7. Reset the spritesheet to how it was before

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.

And here is the cart for you to download and look at the code

Cart #circular_mask_method4true-0 | 2022-01-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
29

Pros

  • Fairly short
  • Uses no sprites
  • Circles look clean at any size
  • Allows multiple intersecting masks
  • Versatile

Cons

  • CPU intensive
  • Tapping into weird tech

Performance

Here is the 30FPS CPU load I got on the above carts.

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%

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.

Sources

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.

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! @xCoraNil used this effectively in their game Night of the Worm Slayer.

Method 2 is something I've recently seen in a Twitter post by @sticky.

Method 3 I've first seen in in this excellent post on this subject. It was @freds72 who suggested doing it like this and I was pretty surprised about how simple the core math formula was.

Method 4 is something @NMcCoy suggested in a Twitter conversation not long ago.

It's Your Turn!

This was a long post. Now it's your turn!

  • Try the different methods out. Post Results!
  • None of the code is optimized for speed or for tokens yet. I'd love some help with that!
  • Do you have ideas for your own methods? Post them here as well!

Let's build a repository of tools to tackle this recurring problem!

P#105554 2022-01-30 13:36 ( Edited 2022-01-30 14:09)

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#97381 2021-09-16 02:20

Cart #highstakes-2 | 2020-11-26 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
219

Las Vegas 2024. Vampires have stolen your blood. Play the card game of your life and win it all back.

Rules

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.

Complete rows or columns to unlock Hint Tokens.

  • ​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​

  • A [<>] 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.

  • A [□] hint token will highlight a 2x2 area. The Vampire card must be in that area.

If you think you know where the Vampire card is you can use the Stake to stab it immediately for more points.

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.

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.

Each match lasts 5 rounds.

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.

Credits

This game was created as part of the A Game By Its Cover Jam 2020. The goal was to create a game based on of the cartridge covers from the Famicase Exhibition 2020. The cover to High Stakes was created by Tyler Q Anderson and Jamie C Lee.

The music was composed by Gruber Music.

The game was written and designed by me ;). Enjoy!

P#83548 2020-10-31 17:34 ( Edited 2020-11-26 07:26)

Cart #memsplore-3 | 2022-01-10 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
70

MEMSPLORE

I made this little tool to visualize and edit PICO-8's memory. The app has 3 modes

(From Right to Left)

  • LIST MODE - Shows addresses in a list. Parses the content of the memory as decimal, hexadecimal and binary numbers. Also renders the value as a character.
  • HEX MODE - Shows addresses as hexadecimal numbers with 6 entries in each row. Also renders the values as a line of pixels.
  • DOT MODE - 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.

In addition each mode has two tools to find a specific address:

  • MAP - 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.
  • JUMP - Allows you to enter a hexadecimal address directly. The shortcut is J.

Let me know if there are some errors. Let me also know if there are any features that you'd really love to have.

(Tilemap contains a partial artwork originally by @johanvinet)

Change Log:

0.0.1 - Initial Release
0.0.2 - Added description to button mapping (0x5F4C - 0x5F53). Tweaked description to 0x5F33 and 0x5F34.
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.
0.0.4 - Updated for 0.2.4

P#80908 2020-08-18 08:13 ( Edited 2022-01-10 02:24)

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:

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#77323 2020-05-28 14:46

Not necessarily a bug - just unexpected behavior / missing functionality in 0.2.0i.

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.

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.

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.

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#76848 2020-05-18 17:13 ( Edited 2020-05-18 17:21)

The changelog to v0.2.0e says

Added: cpu working animation when cpu usage > 120 skipped frames

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.

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
P#76845 2020-05-18 16:30

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.

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.

The HTML + JS files were uploaded directly to my web server here:
http://www.ceeu.de/picotest

I experienced the same problem when uploading the files to itch.io.


While we are here. I have a different problem when running on an older iPad Mini:

A tiny icon of the game in the middle of the screen. Doesn't react to taps at all. Can't launch game.

This one uses iOS 9.3.5. A bit old so I didn't expect much anyway.

P#76844 2020-05-18 16:11

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.

However, this won't undo properly. The map will revert but not the spritemap. See gif:

Tested in 0.2.0i

P#76838 2020-05-18 15:37

Cart #porklike-2 | 2020-03-17 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
211

Porklike

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.

(X) - Inventory / Confirm
(O) - Cancel

The music was composed by Sebastian Haßler. The environment art as well as the protagonist was inspired by the work of the pixel artist @pixelartm and used with their permission. The artwork of the enemies was inspired by the work of the pixel artist @kirai_s and used with their permission as well.

Porklike was created as part of a video tutorial series. If you want to make your own Roguelike, please check it out:

P#73825 2020-03-11 16:43 ( Edited 2020-03-17 12:52)

Here is my recent video review of the GameShell from the perspective of a PICO-8 enthusiast

P#64246 2019-05-08 23:10

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 7-Day Roguelike Challenge 2019 begins. The series is designed to give you the skills and tools to participate in that challenge.

If you have any questions of feedback you can post them in this thread.

Here is the full playlist

Here are the videos:

#2 - Basic Movement
#3 - Animation
#4 - Token Optimization
#5 - Wall Collision
#6 - Object Interaction
#7 - Text Boxes
#8 - Message System
#9 - Monsters
#10 - Mob System
#11 - Combat
#12 - Simple Pathfinding
#13 - Death
#14 - HP Display
#15 - AI
#16 - Fog of War
#17 - Fog Polish
#18 - Token Tweaks
#19 - Pathfinding
#20 - Path Tweaking
#21 - Inventory UI
#22 - Use Menu
#23 - Equipment
#24 - Eating
#25 - Throw UI
#26 - Throwing
#27 - Gameplay Test
#28 - Random Rooms
#29 - Signature
#30 - Signature Mask
#31 - Worm
#32 - Merging Areas
#33 - Shortcuts
#34 - Stairs
#35 - Floors
#36 - Shepherding
#37 - Hub Floor
#38 - Optimizations
#39 - Tile Borders
#40 - Pretty Walls
#41 - Wall Overlap
#42 - Decorations
#43 - Managing Stats
#44 - More Monsters
#45 - Chests
#46 - Random Food
#47 - Curses
#48 - Stats
#49 - Freestanding
#50 - Bugfixing

Final Video:

P#61444 2019-02-01 20:31 ( Edited 2019-03-03 00:04)

Cart #sanki-2 | 2018-12-18 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
41

Sanki

It's winter. Let's go sledding. Ride the slope until you stop or crash.

Controls

x/z - confirm
arrow keys - you can turn your sled in the air to pull of some sweet tricks

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!

But what does Sanki mean?

"Sanki" is Polish for "sledding". 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.

Credits

Design/Art/Code: Krystian Majewski ( @Krystman)
Music: Chris Donnelly (@gruber_music)

About Pico-8 Advent Calender

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!

Find out more at: https://pico8-advent.tumblr.com/

And check out the Pico-8 Advent Calendar each day for a new surprise: https://www.lexaloffle.com/bbs/?tid=32388

P#60057 2018-12-18 06:29

Cart #56576 | 2018-09-12 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
192

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.

This game was created as part of the A Game By Its Cover Jam 2018.
https://itch.io/jam/a-game-by-its-cover-2018

How to Play

Dpad (Arrow keys) - Move Cursor
X Button (X or M or V) - Confirm. Serve pastry.
O Button (Z or N or C) - Cancel. Turn cursor.

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.

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.

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.

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!

Some Background

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.
https://twitter.com/Louistrations

He's the artist of the webcomic Apricot Cookies.
https://apricotcookies.net/

I've livestreamed the entire process here. It seems like it took around 100 hours.

The entire playlist is here:
https://www.youtube.com/playlist?list=PLea8cjCua_P1taIqeYv6mKVdIfIZLFZGK

The music was made by my friend Sebastian Haßler
https://twitter.com/sebashas

P#56575 2018-09-12 14:00 ( Edited 2018-09-19 22:47)

Cart #53976 | 2018-07-06 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
133

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, check out this thread!

How to play

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.

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.

Powerups

Orange = Slow - Slows down time
White = Life - Gives you an additional extra life
Green = Sticky - Makes you pad sticky. It makes the ball stick to the paddle so you can launch it again
Blue = Expand - Expands the size of your pad
Black = Reduce - Shrinks you pad but also gives you a 10x score modifier
Red = Megaball - Lets the ball smash through blocks without changing direction
Yellow = Multiball - Splits the ball into two balls. You only lose a life if you lose your last ball

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.

Scoring

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.

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.

For an additional challenge and even more points, press up or down on the start screen for Fast Mode.

Let me know if you see any bugs. Otherwise, Enjoy!

P#53977 2018-07-06 17:02 ( Edited 2018-07-11 10:22)

Cart #54038 | 2018-07-09 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
164

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 Chess Jam 2018. Here is the game's entry on itch.io.

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.

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.

Note: Game will not recognize draw by Threefold repetition.

P#52226 2018-05-01 12:55 ( Edited 2018-09-27 23:02)

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.

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.

I would love to use the pen as a convenient way to do some Pico-8 pixelart on the go.

P#50743 2018-03-23 14:34 ( Edited 2018-09-05 01:25)

Cart #52365 | 2018-05-04 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
17

It's finally here!. Some of you may have seen the video tutorial I was working on over the year. Well, the game is finally ready to be playtested!

How to play

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.

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.

Playtesting Help!

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.

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.

Thanks in advance! Enjoy!

P#49663 2018-02-25 10:43 ( Edited 2018-06-16 03:08)

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#48111 2018-01-13 07:25 ( Edited 2018-01-14 18:11)

View Older Posts
Follow Lexaloffle:        
Generated 2022-05-22 23:35:27 | 0.146s | Q:80