JRJurman [Lexaloffle Blog Feed]

Blind Accessible Games in Pico-8

Sun, 17 Mar 2024 06:43:38 UTC

I wanted to share a few projects that I've been working on to prove out that making low-vision / blind accessible games is possible in PICO-8!

To get to the meat of it, here are the two games that my friend and I were able to put together that we built in prep for, and as a submission to the Games for Blind Gamers game jam:
Tiger & Dragon - https://jrjurman.itch.io/tiger-dragon

Lunch Gambit - https://jrjurman.itch.io/lunch-gambit

The games require a screen reader if you want to hear the text being read aloud, but the long and short of it is that the text on the right will be read out to screen readers. For people who might have trouble reading the text or need especially large fonts, the right side panel respects the font-size of the page, and allows players to zoom in if that would help readability.

The way that we were able to accomplish this is by having a special HTML template that reads the GPIO output from PICO-8 - pico-a11y-template

There is a chunk of code from the pico-a11y-template project that needs to be copied into the cart, but once you've done that, then you get access to a couple of methods that interact with the page and allow you to send text in a way that screen readers will be able to pick up.

set_sr_text(text) is the main method to set screen reader text, and allows you to send text (of any size) to the web page to be read out. That text will be loaded into a text element on the web page, which will alert screen readers (if the text has updated).

if (btnp(🅾️)) then
  counter = 0
  set_sr_text("counter reset")
end

There is a required update_sr() that handles the processing of larger text chunks, and finally there is a handle_pause_sr() - frustratingly, the default pause menu isn't (and can't be made from what I can tell) accessible by any means, so the best we can do is alert the user that the game has been paused, and when they unpause reset the text readout to what it was before.

function _update()

  -- your game logic ...

  update_sr()
  handle_pause_sr()
end

Accessibility is a spectrum, so aside from using this, we decided to use the Tomorrow Night font from VEXED for Lunch Gambit, so that low vision users who might not need a screen reader would be able to read the text in the PICO-8 window. This limited the amount of text we could fit on the screen, but was worthwhile to make the game accessible to those who might have issues reading the low resolution font built in.

From the feedback so far, it seems like there were no issues from Blind Gamers on playing these games in Pico-8, so I hope that this library opens up the kinds of games possible in Pico-8, and the total number of games available to those with low-vision

Online Multiplayer for Pico-8 using pico-socket

Sun, 23 Oct 2022 22:56:37 UTC

pico_pong_online

by JRJurman

[Click to Play]

NOTE: In order to play this game online, go to https://pico-pong-online.herokuapp.com/

This game is one example of how to make online multiplayer games with pico-socket, a new library that I've been working on, that came out of a collaborative project with Ethan Jurman and his Tiny Tanks game

You can read some of the finer details about the pong game here: https://github.com/JRJurman/pico-pong-online

For a smaller example, and details around the library, and how to use it, check out the project on github. Below is an abridged version of the README and how it works:

pico-socket

Server and Client library for adding Online Multiplayer to Pico-8

What is it?

pico-socket is a library that allows multiple Pico-8 web clients (HTML export)
to talk to each other via websockets. Once the data has reached each client, it
is loaded in the Pico-8 environment using GPIO addresses.

Simple Example

In your Pico-8 game, use GPIO addresses as a substitute for game state, using
PEEK and POKE to access data for the different players.

room_id_addr = 0x5f80 -- index 0
player_id_addr = 0x5f81 -- index 1
player_0_y_addr = 0x5f82 -- index 2
player_1_y_addr = 0x5f83 -- index 3

function _init()
  poke(room_id_addr, 0) -- hard code to 0
  poke(player_id_addr, 0) -- start as player 0
  poke(player_0_y_addr, 64)
  poke(player_1_y_addr, 64)
end

function _update()
  player_addr = 0
  if (peek(player_id_addr) == 0) player_addr = player_0_y_addr
  if (peek(player_id_addr) == 1) player_addr = player_1_y_addr

  -- move up and down
  cur_y = peek(player_addr)
  if (btn(⬆️)) poke(player_addr, cur_y-1)
  if (btn(⬇️)) poke(player_addr, cur_y+1)

  -- swap player id
  if (btnp(❎)) poke(player_id_addr, 0)
  if (btnp(🅾️)) poke(player_id_addr, 1)
end

function _draw()
  cls()
  rect(40, peek(player_0_y_addr), 44, peek(player_0_y_addr)+4, 12)
  rect(88, peek(player_1_y_addr), 92, peek(player_1_y_addr)+4, 8)
end

Outside of Pico-8, all you need to do is make a javascript file that
pulls in the pico-socket library and calls createPicoSocketServer.

You will need to pass in specific configuration based on your game, but besides the config, nothing else is required. The below snippet is the entire file you need for getting a service running locally or on a cloud
service like Heroku.

const { createPicoSocketServer } = require("pico-socket");

createPicoSocketServer({
  assetFilesPath: ".",
  htmlGameFilePath: "./sample.html",

  clientConfig: {
    roomIdIndex: 0, // ROOM_ID

    // index to determine the player id
    playerIdIndex: 1, // PLAYER_ID

    // indicies that contain player specific data
    playerDataIndicies: [
      [2], // PLAYER_0_Y
      [3], // PLAYER_1_Y
    ],
  },
});

And that's it! Running this javascript file with NodeJS will start a server, that you can connect to. You can run this on your own hardware if you are familiar with setting up servers or LAN setups that other people can connect to. You can also use a cloud service like Heroku to fairly trivially deploy and host your games.

Pico-Drawer-9000

Sun, 09 Oct 2022 20:09:54 UTC

pico_drawer_9000

by JRJurman

[Click to Play]

Simple etch-a-sketch clone for the Pico-8, was used to get familiar with Pico-8 development - feel free to load, read the code, and remix!