itch.io

I’m not sure to understand the problem. Did you have some very long samples in your program?

Pixelbox is a simple 2D rendering engine, so it’s up to you to design your art to be a top-down view.

You can follow this tutorial to understand how to make a character moving on a top-down map.

Thanks. This is programmed in JavaScript, using Pixelbox.

For those interested, I made the code open-source.

There was a bug. It is now fixed. Thanks for reporting

To use an image as a tilesheet, simply drag the image from the assets panel, onto the tilesheet panel. The map will now use this image as tilesheet. Note that a tilesheet needs to be arranged in a 16 by 16 grid of tile. Looking at your screencap, you will need to edit the image to remove the gaps between tiles, and rearrange the tiles in a 16 by 16 grid. Also, if the tile size is not 8 by 8 pixel, you can change that in the project settings.

Hum. It looks like a problem with gamepad. Maybe a connected gamepad has a configuration different from what Pixelbox is expecting.

The first thing you can do to avoid this issue, is disabling the gamepads in the project settings: From the top menu: Project > Settings, click on the Controls tab, and uncheck the gamepads component.

If you could to help me, I would be interested to understand what is causing this issue. Do you have a game controller plugged? If yes, what is the model?

In the console, can you type navigator.getGamepads() and copy what you get as result?

No, a map can only use one tilesheet. But you can layer several maps that each uses a different tilesheet. For instance a “background” map using a “background” tilesheet, and a “foreground” map using a “foreground” tilesheet.

Maybe you have an infinite loop somewhere in your code, and it freeze everything. Can you post your game code so we can help debug?

Assuming your map is named “map” (you can change its name from the map editor) In your game code, add the following:

var map = getMap('map');
draw(map, 0, 0);

Are you sure your map has been named “map”? Name is case-sensitive. You can rename a map from the map editor (first text input in the top).

Alternatively, you can also get a map by its number: You can try var background = getMap(0);.

Thanks for reporting, this sounds like a bug in Pixelbox. I will have a look.

When creating a new slice config, Pixelbox will attempt to create a file slicesConfig.json in the project”s assets directory. It might be this part that fails for some reason?

Do you see this file in the assets directory? If not, you can try to manually create this file and edit its content with the following:

{
  "_type": "Nine slices config",
  "sprites": {}
}

Then try to close and reopen the project.

Simply drag and drop the song file onto Petaporon UI to load it.

nice demo. as difficult as the original game ;)

I would start small by creating an algorithm that generate one of the 16x16 room. Maybe start with a simple function that create an empty map, and add some random sprites in it. It could look like this:

var TileMap = require('pixelbox/TileMap');

function createRoom() {
  var map = new TileMap(16, 16);
  var nbSprites = random(40);
  for (var i = 0; i < nbSprites; i++) {
    var x = random(16);
    var y = random(16);
    var sprite = random(64);
    map.set(x, y, sprite);
  }
  return map;
}

var room = createRoom();
draw(room, 0, 0);

Then, implement a player character that move into this room (look at this tutorial).

When the character reach the border of this room, we can create another room to continue the desert.

Finally, if you want the desert to look the same when the character move back to the previous room, you will need to control the randomness. For that, I recommend to look into “Pseudo-random number generator” that can be seeded.

I added a new palette-swap-shader project to the Demo projects archive that can be downloaded from the Pixelbox page.

This project demonstrate how to use a shader filter to achieve a palette swap effect.

Note that it needs version 2.1.1 of the Pixelbox library. While creating this demo, I noticed few improvements that where required in the ShaderFilter component. This changes will be included later, in the next release of Pixelbox. I the meantime, you need to update the library by yourself using npm install.

Please let me know if you’re not familiar with NPM or if you have trouble installing the 2.1.1 version.

Nice! Thanks for the help.

I tried to make a fix, but I cannot test it because this bug doesn’t happen on my machine.

If you have some time, could you please test and tell me if the problem is still happening?

There are not feature like Pico-8’s pal by default in Pixelbox.

This is probably achievable with a custom shader, but would require some extra preparation. If there are people interested, I could try to create a small demo to show how this can be done.

1. To scroll the map in the editor, hold the space bar pressed, and click and drag with the mouse.

2. To implement scrolling in a game, drawing the map with a negative offset will work fine. You ca alternatively use the camera(x, y) function that offset all further rendering to the {x, y} point (use camera(0, 0) to reset to origin). See this tutorial explaining the camera usage.

Try the mouse scroll while hovering the mouse cursor on the tilesheet window.

There is also a new option to decouple its zoom from the tilemap window, from the top menu: View > Limk map & tilesheet zooms

Hi PepperBoi,

I made an attempt to fix the exporter pitch issue. Can you try again, and tell me if that fixed it for you?

Thanks a lot, this is helpful

Thanks for the report. What I think is happening is that the sample rate initialize to something different than 44.1KHz, and this messes with some parts of the sound engine or the renderer. It’s quite difficult for me to debug, as I can’t reproduce this issue on my machines.

Is the tempo also different when you export, or only the pitch is affected?

By any chance, would you be able to share both the exported .json and .mp3 files of a track you made, so I can have a look?

I tested on Firefox and I had the same issue as you. But the new option fixed the problem for me.

Please make sure you checked the “do not require ctrl/cmd” radio button in the Petaporon’s settings (top-left corner button). Then reload the page (make sure the option is still set after reloading. Petaporon store the settings in the browser’s local storage).

Only press Z to cancel (ctrl+Z will probably still conflict with Firefox, so Petaporon will not receive the keystroke). Similarly, only press X, C and V to cut, copy and paste selection of notes.

I’m not sure to know what is the problem, but it might be caused by a conflict with the browser’s own shortcuts handlers. Just by curiosity, can you tell me which web browser you are using?

To try to fix that, I added a new option in the settings menu to allow using shortcuts without pressing ctrl/cmd keys. ctrl+Z just become Z, and so on.

You need to refresh the page after changing the option for it to take effect.

The problem is that the variable palette has not been defined (same problem for the variable tilesheet. instead you can use assets.tilesheet).

Pixelbox will alway initialize a texture with the default tilesheet and palette defined for the project. So you don’t need to use setPalette unless you want to switch to a custom palette.

The palette must be an array of Color instances. Color can be initialized from a color string, or from its {red, blue, green} values.

The code would look something like this:

var Color = require('pixelbox/Color');
var palette = [
  new Color().fromString('#001e14'),
  new Color().fromString('#ff0035'),
  new Color().fromRGB(0, 140, 255),
  new Color().fromRGB(255, 255, 255),
];
texture.setPalette(palette);

<3

It has been asked several times. But the reality is that it’s a lot more work to manage and distribute executables, when compared to a web version.

For this project, I just want to keep things simple for now.

copy/paste should work: select a group of notes with right-click and dragging the selection rectangle around the notes to copy (note are highlighted in white). Then ctrl-C, ctrl-V, and finally move the copied notes to another position.

If it still doesn’t work, can you describe what you are doing and what is happening?

it’s probably an issue related to the sample rate of the sound card that is not 44.1kHz (what Petaporon is assuming). I had a similar problem in another project. I’ll try to have a look.

I think you are mixing pixel position (sprite and draw) and tile position (background.get). You need to convert pixel to tile by dividing the pixel coordinates by the tile sizes (available from settings.tileSize). Or, inversely, if you want your character to move in tile increments, modify the last line as follow:|

sprite(206, character.x * settings.tileSize.width, character.y * settings.tileSize.height);

I’m not sure what is happening exactly, but my guess would be that an image that was used by a tilemap has been deleted or moved. Try to find which map causes this problem and unlink its assigned tilesheet from the editor.

You can use as many tilesheet as you need. The only limitation is that a tilemap can only use one tilesheet at a time (but can be swapped at execution time).

API are as follow:

Texture.setTilesheet(image); // set the tilesheet for this texture only. set image to null to unlink the tilsheet and use the default one. Texture.setGlobalTilesheet(image); // set the default texture globally // Note: the main screen is a Texture accessible with the global $screen variable

TileMap.setTilesheet(image); // swap the tilesheet for this tilemap

Note2: images can be another texture. So it is possible to procedurally generate and use tilesheets.

With the latest version of Pixelbox (2.0.5) it’s now possible to cut/copy/paste tiles in the tilesheet: right-click on a tile will open a context menu giving you these options.

Yes, the tilesheet will probably always be limited to 16 by 16 tiles. The reason being how the tilemaps data are formatted and stored.

Note that you can have as many tilesheet as you want, and switch between them. The only limitation is that a tilemap can only use one tilesheet at a time (but you can superpose several tilemaps using each a different tilesheet).

With the recent version of pixelbox (2.0.5), it’s now possible to change the bitmap font. To be correctly recognised by Pixelbox, the bitmap font must an image with transparent background, where characters are set in a 16 by 6 grid in ASCII order. Once you added a charset image in the assets folder of your project, you can change the font with the following command:

$screen.setCharset(assets.charset);

Note that you need to have Minitext option enabled in the project settings to have pixelbox’s text API installed.

I added a demo project to the download section.

Yes, sounds made with Bleeper are free to use without any restrictions in any projects, commercial or otherwise.

For security reasons, the game is running in a sandbox environment by default (with Node integration disabled). You can disable sandbox environment from the menu > Debug > Run game in sandbox

No, gif are not supported.

The commands are Add sequence step before and Add sequence step after. You need to have the cursor inside the sequence editor (press Tab to switch from the pattern editor to the sequence editor, or click on a sequence cell).

By default these commands are bind to Shift+< and Shift+>. These shortcuts can be redefined in the settings.

To delete a sequence step, press Shift+Delete