Log In  
BBS > Lexaloffle Community Superblog
This is a combined feed of all Lexaloffle user blogs. For Lexaloffle-related news, see @zep's blog.

All | Following | PICO-8 | Voxatron | General

Cart #losthalloween1-0 | 2020-10-25 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
1

About

In Lost Halloween, you'll choose a costumed character and go trick-or-treating through a neighborhood. At each house you'll have to navigate through their yard, making your way up to the door bell. Ring it, get candy, then on to the next house! But beware, weird things can happen on Halloween. Hey, did that garden gnome just move?

Controls

  • Arrow keys: move cursor or character. You can move diagonally by pressing two move keys at once.
  • (Z): attack
  • (X): interact, eat candy (if available and HP<3), advance dialog

Features

  • Five playable characters
  • Thirteen houses to visit
  • Awesome music by Gruber (@gruber_music, PICO-8 Tunes vol1 and 2)

This is my first upload to the BBS. Let me know what you think!

P#83353 2020-10-25 22:01

INTRO

After a post where I was asking this same question, and thanks to the comments I've received, I've decided to create a guide on how to upload a game on itch.io in a nice way.

By default, if you upload a game on itch.io you obtain something like this: FartJumper (itch.io)
(not a game of mine, I use this just to show the difference, if it is a problem I'll remove the link)

As you can see there are a lot of borders and I personally don't like them.

I made it so that the game run like this: Not Enough (itch.io)
(this is one of my game)

In my game I also enabled the autoplay and made some adjustment to it to make it even better, but I will explain that later on.

GUIDE

TL;DR

You can download this index.html and use it mostly as it is: index.html
All the things I've changed are flagged by a comment ELIA CHANGE.

After downloading the index.html, you have to follow this 3 steps:

  1. do points number #1 and #2 of this guide, they are itch.io side so are easy to do
  2. change the name of the .js into the index.html (point #8 of this guide)
  3. change the url of the background into the index.html (point #9 of this guide)

You can easily find those lines in the html by searching in the index file the words YOU CHANGE, I added a comment with this tag to help.
The url background must be taken from the index.html file exported by your game, the name of the .js must match the .js file of your game.

EXTRA

As an extra, I add a special index file if you want the autoplay to run on itch in a smoothly way (like my game): index.html

I say this because if you just flag autoplay to true, you will see some frames when the page is loaded where the splash image is displayed, and I don't like that, so I added some code to prevent it, but it could be "experimental".
In this special version I also removed the background splash image, but if you want it you can add it back.
All this special changes are tagged as ELIA CHANGE AUTOPLAY.
If you want to use this you still have to follow the previous points, there is nothing more to do.

DETAILS

If you know more or think I'm doing some mistakes please tell me that in the comments specifying the points you are talking about.

ITCH.IO SIDE

These are changes you can make directly on itch.io

1.

The embed options should be set as follows to obtain the bigger size with small border:

This is because the game is made to run at max 512 pixels, that makes it possible to be pixel-perfect. If you put less than 512 in height, the game scales down, but if you put more than 512, the game will not become bigger.

In the index.html you could maybe change this, but I didn't need it since I liked the 512 frames and it is the same size you have on PICO-8 page.
I don't know though how to do that, it seems maybe a bit more complex than just changing the 512 limit, especially since the html is already made to become bigger than 512 pixels, so I don't know if it is something more entangled with itch.io.
If you discover a way to do that feel free to comment on this post your guide!

2.

When you upload the game with the index.html above, you will still have some borders almost the same color as the background.

This is an itch.io thing probably to make the game stand out or something, but if you don't like that, there is a trick to remove them.
You have to create an empty image (transparent), I think even a 1 pixel x 1 pixel could work, and upload it as the embed BG.
You need this to make the options for the embed BG to pop up (lol), then you can set the alpha dot to max and the difference in color will disappear.

That's it regarding itch.io side.

INDEX.HTML SIDE

These changes are made into the index.html file.

3.

You must remove the background color keyword.

This let you remove the background color of the game borders, it's used so that you can change it directly from itch.io as in point #2.

4.

If you don't change this value from 95 to 100 you will have a bigger border in the bottom. It's not a big issue if you make the game border as the page background, since you will not see those borders, but if you put it to 100 you will have equal borders top and bottom.

I also changed the max-width to 100vw, this does not really change anything, but I do that nonetheless because it seems meaningless to me at 95.

5.

These two are more a preference of mine.

-

Basically the buttons on the right are more spaced from the game view than between themselves (left margin is bigger than bottom margin), so I removed the additional left margin and decreased the left margin of every button. You can leave it as it is if you like the way it is now.
To be honest, with these changes the buttons are positioned more like the way they are on a pico-8 page.

6.

This is something weird. On PICO-8 you have this flag enabled by default, but in an exported html it's not.
I think this flag must be set to true so that you can put the game in fullscreen while on mobile, especially on a tablet, otherwise the game will just stay on the little window you've created on itch.io and will not be nice to play.

As a side not, on a smartphone you will have a different view of your itch.io page, I don't know why to be honest but I think is somehow enforced by the small screen size.
Specifically, you will have to press a "run game" button that I guess it's added but itch.io since it's the same as other non pico8 game.
That said, on a smartphone (not a tablet, or an iPad at least) the pico8 games on itch.io are a bit buggy, meaning that you can't close them but are forced to go back as a web page.
I will probably do a separate post as a bug report for this.

7.

When you upload the game on itch.io, you will have the splash screen blurred behind the start icon. This happens on PICO-8 too.

The splash screen is the one before you start the game.
I personally don't like that effect, if you prefer your splash image to be rendered "pixel perfect", you just add those 3 lines:

This way the splash image will be pixel perfect:

8.

Here you must put the name of your .js file, generated by your game.

9.

Here you must change this url with the one in your .js file.

That's all folks!

Extra

Special Autoplay

This is an additional thing you can do if you want your game to run smoothly with the autoplay flag set to true.

If you just set the autoplay flag to true, you will have the autoplay, but on a pc there will be some frames while loading where you can see the splash screen, and it seems a bit laggy, not polished.
These are the step I implemented to remove that.

10.

Obviously set the flag to true

11.

Make the splash screen not appear by default.

It seems done, but here we have our biggest issue: on a mobile device (and maybe somewhere else too) the game can't start in autoplay, sadly.
This means that we need a way to make the splash screen appear nonetheless on a mobile device.

12.

My best solution was just to delay the appearing of the splash screen, so that on a pc it will just not appear in time, since the game insta load, while on a mobile it will.

-

You can change the time from 1000 milliseconds (line 459) to how much you want, but I think 1 seconds it's enough to make it not pop on a pc, but not too much that it pops too late on a mobile device. 500 milliseconds is also ok, I used 1000 just to be a bit more sure.

To go a bit more into details, this code just specify to enable the splash screen after 1000 milliseconds have elapsed, but only if the game is not already running!
I think this code should be 99,99% safe, since at worst (likely never) the splash screen could appear for 1 frame when loading, but I'm not that much into javascript.
If you know something more about this let me know!

That said...

YOU MADE IT!

Thank you for reading my guide and I hope it was helpful and helped you create a prettier itch.io page.

If you have any doubts, suggestions, improvements, please leave a comment, I would really appreciate it!

P#83341 2020-10-25 14:39 ( Edited 2020-10-25 19:20)

Cart #momentum-4 | 2020-10-25 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
2

Thanks to RubyRed for letting me use Celeste 1.5 to make this, Michael for doing summit
code, and Levyorg for helping with the title screen

P#83337 2020-10-25 12:14 ( Edited 2020-10-25 19:50)

Yet another mines clone.
Still working out

  • some of the end game flag logic
  • surrounding graphics
  • levels
  • sound affects

Cart #brettski_mines-1 | 2020-04-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA

P#74862 2020-10-25 00:24 ( Edited 2020-10-25 00:26)

Cart #sw_cave_diver_proto-0 | 2020-10-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
So, I'm currently learning how to make games with Pico-8. Yeah.

I used the Cave Diver tutorial in a zine made by @MBoffin
You can find the zine here: https://mboffin.itch.io/gamedev-with-pico-8-issue1

With all that said, I might return to this eventually, but who knows at this point.
However, I would appreciate some feedback and I might consider them for future games.

Thanks and I hope you enjoy this Flappy Bird derivative. Hehe.

P#83312 2020-10-24 21:00 ( Edited 2020-10-24 21:04)

Cart #momentum-2 | 2020-10-24 | Code ▽ | Embed ▽ | No License

P#83300 2020-10-24 17:20

Cart #rsbhuti-0 | 2020-10-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
5

Seance

A surreal game used to explore rendering in pico-8.

Controlled via arrow keys

P#83294 2020-10-24 15:53

Cart #binariolunafromthemoon-1 | 2020-10-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA

Binario is an implementation of the puzzle by the same name, invented by Adolfo Zanellati. I know this game from the Simon Tatham's puzzle collection, as it's one of my favourites. The algo to create the levels is bad, basically a less than brute force but still pretty brutal, and it takes many tries for the higher levels.

Mouse is supported and makes everything better, but it's still possible to play with key controls too.

I added a clue system to make it more engaging. I wanted to add also something like a timer that would fill up and down according to the moves and the state of the game, but finally decided against it since it wouldn't really add too much and probably no one will play this version anyways. It was an entertaining exercise in Pico8, and hopefully someone finds it interesting.

HOW TO PLAY

You have to fill the grid with blues and pinks. No more than 2 cells of the same color can be together, neither in rows nor columns. And each column and row has to be completed with the same amount of cells of each color. So in a 8x8 grid, there has to be 4 pinks and 4 blues in each line. That's it. Really easy.

P#83280 2020-10-24 13:10 ( Edited 2020-10-24 13:29)

P8C-BUN

Cart #drakeblue_p8cbun-0 | 2020-10-24 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
2

Help your chosen bunny cover each level with poo then escape down a rabbit hole, but don't get caught by the fox or anything else that's out to get you.

Finish all 16 levels without restarting to achieve "Iron Bun" or just try to post a high score. Start at whatever level you like.

Controls

  • Use the d-pad/arrow keys to direct your bunny.
  • z/c/(O) to show where you haven't pooed yet.
  • x to paws and return to the title screen.
  • You can toggle the music or return to the title screen from the menu as well.

Tips

  • The buns will keep running in the direction you choose until there's no clear path in front of them so there's no need to hold down the arrow keys.
  • If you choose a new direction before a junction or corner they'll remember that and turn immediately so corner early for maximum speed.
  • The bananas will give you a speed boost, but leave skins behind that you (or the fox) may slip on.
  • Macaroon is too tough to be caught by the fox or anything else so if you just want to play through the levels (or practice) choose to play as her. Real-life Macaroon has seen off cats and kills blankets on a regular basis.
  • The fox gets faster and the red kite will fly over as you cover more levels so choose which level you start from wisely if you're aiming for Iron Bun.
  • Manipulate the fox, especially using the rabbit holes, to make your life easier.

As it's October, be sure to check out the ninth level, Hoppy Hallowe'en :)

This is my first PICO-8 game (in fact, my first full game for anything) so any feedback is welcome. More info about P8C-BUN is here: DrakeBlue.com.
This game was inspired by our real-life pet rabbits (especially Oreo, who does tend to poo everywhere) and exists thanks to the patience of my gf (who runs the rabbit-oriented website mentioned on the title screen RabbitRetail.co.uk and uses it to help donate to rabbit charities and rescues as well as feed ourselves and our own bunnies).

P#83276 2020-10-24 11:46

Cart #willo-0 | 2020-10-23 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
21

Skelliwags have taken over the graveyard and its up to Willo to kick them out!

Help little Willo sneak around, go 'woo', blow out candles and get up to all sorts of spooky stealthy fun in this short stealth'n'spook-em-up

Featuring

  • 8 action packed graveyards to spook about in
  • MGS style ranking system, can you get all 8 platinum medals?
  • Skelliwags, floating eyeballs, tombstones and occult pentagrams
  • One adorable little ghost, Willo

Game by @danhowardgames

Music and SFX by the outrageously talented @gruber_music

P#83251 2020-10-23 16:57

Another of my Atari 2600 1983's games ports. All sounds from the original!
Enjoy!

Cart #tewaribana-3 | 2020-10-23 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
1

P#83245 2020-10-23 15:36 ( Edited 2020-10-23 19:08)

Cart #ebeamanime-0 | 2020-10-23 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
4

P#83241 2020-10-23 13:13

Cart #conwaylife-0 | 2020-10-22 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
1

Here's a pretty minimal implementation of Conway's Game of Life for PICO-8. It has a basic performance optimization (it only updates the active area of the grid), and you can see the active area adjust by setting dbg=true at the top of the code.

That said, it gets pretty slow pretty quickly for larger simulations.

You set up the grid as follows:

Arrow keys -- move the cursor around.
Z key -- toggle a given cell to active/inactive.
X key -- start / stop the simulation.

If you're unfamiliar with the Game of Life, google it :-).
An easy starting point for a cool pattern is a ten cell contiguous row (10 connected horizontal cells).

There are better PICO-8 Game of Life carts, but I had a lot of fun making this.

Enjoy!

P#83226 2020-10-22 21:02 ( Edited 2020-10-22 21:04)

Cart #persona_battle_system-0 | 2020-10-22 | Code ▽ | Embed ▽ | No License
2

A little persona battle system concept I worked on as part of a school project, I may expand it later with different enemy types, more items, and maybe XP

Use the arrow keys to scroll the menu
Z to select
X to go back

You begin with 60HP, 30SP, and 3 medicines

Enemies have a chance of dropping a medicine after defeat

See what streak you can get!

P#83219 2020-10-22 16:27

This is an implementation of the function described on this short paper:

https://arxiv.org/abs/2010.09714 (twitter thread)

It is amenable to tweeing/easing in games. I have programmed easing functions in the past and one of the problems about them is that you need to code "families of easing functions":

(That's from tween.lua, if you are curious).

I like this function because it can aproximate all of the "smooth families of functions" on that graph (all except the "back", "bounce" and "elastic" families) with a single function, plus it adds an infinitude of variants. Not bad for ~66 tokens.

Cart #schlick_bias_gain-0 | 2020-10-22 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA

Usage:

y = easing(x,t,c)

All params (x, t and c) are restricted to the [0,1] interval. When they are, the result (y) is also in the [0,1] interval.

  • x is the input being eased. In games and animations this usually encodes "the percentage of time that has passed since the start of the animation". Notice that x is restricted to [0,1]. If the magnitude you are trying to ease is not on that range, you might have to scale it (like I did in order to display the graphs).
  • t is "the threshold point" - that's the location of the "inflection" in the curve (the point at which the curve switches from out to in, or viceversa).
  • c is "the curvature". At 0-0.5 the curve will "start in in", gradually approaching linear interpolation at 0.5, and then the curve will "start in out" the more it approaches 1 from there.
  • y is the return of the easing. In games and animations this is often the "percentage of space the thing moves, for the time that has passed". Like with x, it will be on the [0,1] range, so it might need scaling.

Usually x changes over time, while t and c are "fixed" during an animation. On the attached Cartridge they are animated, but only because we show the whole curve.

There are a couple differences between my implementation and the one in the paper:

  • I had to add 1 to the x>=t branch of the function. I believe this is because Pico-8's y-axis goes "down" instead of up, like in "regular math". Not 100% sure about this.
  • The s parameter described in the paper is a "slope". When it goes from 0 to 1 it acts "one way", making the curve more "steep" at the beginning and when it goes from 1 to infinity it acts "the other way", making it more steep at the end. I replaced s with c (c = 1/(s+1)), so that it stays on the [0,1] range, like the other params.
P#83208 2020-10-22 08:54 ( Edited 2020-10-22 15:54)

Cart #destructioncarnival-0 | 2020-10-21 | Code ▽ | Embed ▽ | No License
3

The story so far

You are Super-Agent D.S. Troy.
Your mission is to battle your way through the horde on minions under the command of the mischievous warlord Amadeus and his two generals: Horace and Eddington.

And for that, you're going to use an advanced arsenal!

The Laser with unlimited shots. The Spread Shot for double fire. The Rapid Pulse, able to fire bullets with fast rhythm and great velocity. The Fire Wall, fearsome against enemies in rows. And last but not least, the Missile and the Bomb, deadly, but be careful not to get caught up in their explosions.

Get rid of your enemies: the horrible Mutant, as stupid as ugly. The Commando, cybernetically augmented and armed with a laser pistol. The Mastermind, a flying brain capable of paralyzing you by a simple thought. The Slime Ball, fast and unpredictable. And the terrible Daddy Tentacle and his voracious offspring, the Hatchling...

And be careful where you step, the ground is mined!

How to play?

- Move around
- Fire
- Hold down to strafe
You can press ENTER to swap and buttons

About the game

❤ Destruction Carnival is the demake of Destruction Carnival, a game created by Charles Tumino, back in 1997. I discovered that game on a +500 freeware CD-ROM back in 2001 and it was an instant blast!

I hope you like this demake!

P#83193 2020-10-21 16:30 ( Edited 2020-10-24 04:16)

Cart #birdnamedtry-1 | 2020-10-21 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
1

A bird named try

My first game using pico-8, a simple platformer where you play as a bird whose only option for vertical mobility is climbing

P#83191 2020-10-21 16:00 ( Edited 2020-10-21 16:03)

I decided to make a Tweetcart today and it ended up being a simple little Jack-o-Lantern generator, but I found it entertaining enough to watch that I figured I'd release it here for y'all too!

Cart #jack_o_random-0 | 2020-10-20 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
5

There's no controls whatsoever, it just periodically generates a new pumpkin. The quality of the expressions varies but overall I'd say they come out remarkably well.

P#83167 2020-10-20 18:59

I'm working on a collision routine for pixel based movement (not grid movement). There's no jumping, it's a from-above perspective:

if btn(⬅️) then
 if intersect(pl.crect1,cage_crect)
 and pl.crect1.x>=cage_crect.x+1 then
  pl.x1+=1
 end
 pl.x1-=1
end
if btn(➡️) then
 if intersect(pl.crect1,cage_crect)
 and pl.crect1.x<=cage_crect.x then
  pl.x1-=1
 end  
 pl.x1+=1
end
if btn(⬆️) then
 if intersect(pl.crect1,cage_crect)
 and pl.crect1.y>=cage_crect.y+1 then
  pl.y1+=1
 end 
 pl.y1-=1
end
if btn(⬇️) then
 if intersect(pl.crect1,cage_crect)
 and pl.crect1.y<=cage_crect.y+cage_crect.h then
  pl.y1-=1
 end
 pl.y1+=1
end

This seems to work OK, but I am not sure how to adjust it so that the player can move along the object, e.g. bottom of player intersects top of object rect, and if player holds down+left the player should still move left. As it is, my code won't register anything other than the opposite direction after the initial direction that caused the collision. I had a quick search for collision examples but didn't find anything that met all my criteria (pixel based + uses collision rects, not tiles). Anyone have any pointers?

P#83164 2020-10-20 17:35 ( Edited 2020-10-20 17:37)

Cart #pixelart_tutorial_sheet-0 | 2020-10-20 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
7

This is the sprite sheet used in my pixel art tutorial. You can use it as reference in your pixel art studies :)

Alternatively, here's the png version:

Video in question:

P#83161 2020-10-20 14:44 ( Edited 2020-10-20 14:50)
View Older Posts
Follow Lexaloffle:        
Generated 2020-10-25 22:43 | 0.211s | 4194k | Q:231