remy / zx-tools Goto Github PK

A collection of ZX web based tools and libraries

JavaScript 79.18% CSS 8.60% HTML 12.17% SCSS 0.03% Shell 0.02%

spectrum zxnextos spectrum-next nextbasic hacktoberfest

zx-tools's Introduction

ZX Tools

Created by Remy Sharp as a child of the late 70s the ZX Spectrum are his fondest memories of computing as a kid. So it only made sense that he turn his browser-based skills to made things work on the Spectrum.

Inspired by the return of Spectrum via the ZX Next, Remy learnt how loading screens worked, how the binary data in screens is arranged and presented his work in a mad demo on stage in 2018.

The code is a little hacky (written over a few days), but has some semblance of organisation. It can be found here and is available under the MIT license.

This project is vanilla HTML + JS project (so yes, I'm currently repeating the navigation over and oer, and it's okay!) - however if you're looking for code, it should be organised well enough to extract the function you want, I just kindly ask that you credit me, ta.

zx-tools's People

Contributors

Stargazers

Watchers

Forkers

plirof maciejmiklas

zx-tools's Issues

Add more sprite attribute animations

The most common way of animating sprites in the ZX Spectrum Next is by changing its pattern every few frames to make the movement illusion of an item on screen. Other ways of doing animation is by changing other sprite attributes, like palette offset (or by changing a single palette index), rotation, scale and mirroring.

It would be really useful to add animation support considering these sprite attributes. This would help new and seasoned developers to try out and discover new ways of animating sprites, which would be a much harder/slower process to try out by coding otherwise.

Consider that some animations take more the two frames to complete. For example, an explosion could take 3, 4 or even up to 5 frames to displayed in its entirety.

Thus, ideally, a sprite animation tool would need to support:

A configurable number of frames (this feature is already available on your animation tool)
To optionally set a few sprite attributes on a frame basis. For instance, change a palette colour index in the second frame, alongside changing its pattern, or even rotate it.
To apply overall options to the animation (I think the ones you have already implemented are great, so leave it as it is)

Possible examples of animation changing the palette offset/index is to illustrate a player death by electrical shock or a spaceship collecting a power-up.

.spr upload problem

Hello, I made a 64 sprite 4bit image patterns with the online sprite editor and saved it as an .spr file.
I then cleared my sprites by selecting 'new sprite sheet', and attempted to upload my saved .spr file back into the sprite editor - It only inserted 4 of my 64 saved sprites.

edit: looks like had a setting in Export to only save 4 sprites. Closed

Sprite editor: Bounce (doesn't bounce)

Hi Remy, I noticed that there is no difference in the animation preview between the Loop and Bounce options. Tested on macOS Safari and Chrome.

Bounce option still loops up/up/up: 1 > 8, 1 > 8 etc
Rather than the required up/down/up: 1 > 8 > 1 > 8

If this can be fixed, that would be great! Ta!

Animation request: movement

I don't know if it's easy to do, but the animation preview would be great if you had the option to move the sprites left / right / up / down as they animate. Sometimes you want to see how they animate in motion. Maybe a small window where the sprite moves right to left and then back to the start of the window, something like that.

Via FB.

SCR to PNG produces garbled output

I just tried the online converter with some .scr files I needed as .png. The files were all created on the Next using SAVE "..." SCREEN$ and then copied from the SD card to my Mac. Results were garbled, but all in the same way. Is it possible the converter cannot handle the 128 bytes +3DOS header that is included in each disk file created using the BASIC SAVE command? Fix would be easy - just strip the first 128 bytes if the total file length is 6912+128 bytes.

Fill tool fails with 8x8 sprites

In the sprite sditor, the fill tool fails with 8x8 sprites in random cases.

It seems like it try to fill as 16x16 sprites, but I'm not sure.

Thanks for your excelent work!

Can't parse ints %

30 print %$E3, @11100011

fails

Tilemap Default Tile

Would it be possible to update the Tilemap screen to enable a default tile to be selected or to fill the tilemap with a specific tile. Currently tile 63 is used which requires all tiles to be exported.

floats are being stored wrong

Compare binary for

10 PRINT 2.34e-2

Result on screen should be 0.234, but when generated from txt2bas, you'll get some silly number like 1.6xxx.

Request: choose save location for sheets

A minor request, but it would help workflow if we could choose the file location when saving spritesheets and tilemaps. On Windows Chrome currently, we have to type out a filename each time, then move the file from Downloads into our working folder. It would be nicer to just have a standard file dialogue, so we could click on the previous file in the correct location and overwrite without typing.

Thanks!

Discussion: best way to merge spritesheets?

I have background sprites, which I've drawn game sprites onto to see how they'll sit within my tilemap.
I now need to take those sprites and merge them with my separate game sprite sheet.
(for context, I've drawn a lift on a spaceship that rendered as a background tile, but I now want it to be a proper sprite so I can move it up and down)
The tools at the moment allow me to import sprites, but that overrides everything.
Is there an easy way of using the tools as they are to copy/paste between separate sheets, or a hack that provides a similar workaround?
If this had to be added as a new UI feature, one idea would be "import spritesheet range" and allow the user to pick a start and end index for the source, and a start index for the destination. Then when the sheet was imported, only some sprites would be read, and they would appear at the destination index.

Request: Tilemap: wider or resizeable UI

The map viewer only utilises about 40% of my screen width. Would it be possible to make the UI more responsive to expand as needed to fill available screen width?
I'd suggest the Map Settings area to the right could be moved out of the main area, perhaps as a new tab, as it generally isn't needed once painting starts. This would provide even more real estate to view larger world maps.

Cheers!

Pan origin is 0,0 rather than where the mouse goes down

Annoyingly this does seem to work after a small pan effect, but it's so damn jarring that it's like it's entirely broken.

Possible to have multiple "projects"?

I'm not sure if there is a good solution to this problem, so I will outline what I'm trying to do and the problem I'm having...

I am working on an 8px spritesheet and tilemap for background, but for my game sprites, I am obviously using 16px mode.
Your tools have really cool offline functionality and use browser storage, so even if my laptop dies I can go back to the page and my background and spritesheet is still there.
The problem is now that I need a separate 16px spritesheet, it has obviously overwritten the browser store, so I've lost my old work.
I know I can reload the files, but would it be possible to work in two separate browser tabs, allowing me to reference my background level whilst working on sprites etc, as well as still having the benefits of browser storage for each tab?
Maybe "save this project as..." and then have a dropdown allowing the user to select between their different projects?

Out of interest, how do you work using tile sprites and game sprites at the same time?

Request: keep tilemap in sync when reordering spritemap

When moving sprites using the >> and << arrow tools, could the tilemap auto-update with the new indexes so as to avoid becoming corrupted?
It's useful to logically reorder the tiles within the spritemap to aid painting :-)
Thanks!

rotate imported sprite losing palette

Image Importer not working

In EDGE Chromium, the option to import from PNG to Sprite didn't work.
The png is shown, but when clic on the "Copy to sprite", not copy to sprite and image resets to end if the image position.
With Chrome works well!

Sprite editor copy and paste

Hi Remy, any chance you would be able to add shortcuts for copy/paste sprites? Even bette if there was a way to move multiple sprites (without shortcut keys) to a different location in the sprite sheet. Thanks!

Audio tweak - Period:Logarithmic

Hi Remy, it is possible to tweak the web interface so that it is possible to toggle the "period" slider between linear and logarithmic? At present, when linear, all the high frequency sounds are bunched up really tightly on the left. Thanks!

Upload map not working on EDGE Chromium

With EDGE Chromium when click on "Upload map" nothing happens.
In Chrome works.

Thanks for your time!

Colour index changes when rotating

Hi Remy - This seems a bit weird and intermittent. But using "r" seems to sometimes corrupt the colour indexing of a sprite.

See vid: https://www.dropbox.com/s/j2u6k94jusiuknc/Screen%20Recording%202021-03-29%20at%2009.50.48.mov?dl=0

In this case I keep selecting i15 to fill, and it reverts to i238 when I rotate the sprite.

I've also occasionally observed much bigger changes, that I have to press undo to revert. I wonder: Is the there some cached data that isn't being updated prior to the rotate, thus the sprite gets overwritten with rotated "old" data?

Sprite - Default Colour

Within the Sprite Editor, when I click New Sprite Sheet all new sprites use default palette colour 1. Is it possible for all new sprites to start with the defined transparent colour?

Tile preview 8x8 in map editor is wrong

In the sprite and map editor, when editing 8x8 tiles, the tile preview at the left, show the tiles in wrong way. I think as 16x16 tiles as show in this image.

Great work!

Favicon for the Sprite tools

How about a favicon for the tool, so we can easily find it amongst dozens of browser tabs?
I've attached a couple of suggestions. I would have included Horace but don't imagine you fancy legal hassles ;-) .

(this is a tongue in cheek request, feel free to close and ignore ;-) )

8px tilemaps default tile index

The default transparent tile when choosing an 8px tilemap is index 63 - to be consistent with 16px tilemaps it should be the last tile, index 255, shouldn't it?

Maybe not a bug, but thought I would check.

Load unheaded tile maps fails

Last days you added an option to save .map files without header.
It works good, but when update a .map file without headerm the system hangs.

The work arround is to save the work files with header, and save only the "release" versions without header.

By the way, I love your tool and I'm using to develop a new game.
I love the online concept!
Thanks for your work!

Export as png/bmp doesn't work for 8x8 sprites

Option to import PNG into 8x8 sprites

Apologies if there's a good reason not to do this, or if it's already there and I'm being thick... it would be useful to be able to import a PNG file into 8x8 sprites as well as the current (and very useful) 16x16 process.

Add filename support

Let me specify a filename for each section: sprite/map/palette - I've lost files too many times saving the wrong filename 😱

Bitmap encoding is buggy

Compare the sd card bitmaps to generated and the headers are slightly off.

8px sprite mode Undo Tool bug

Undo has weird behaviour for me when in 8px sprite mode.
For example, in this screenshot I've painted some random red pixels in one operation with the pen tool, so clicking Undo should remove them:

What actually happens though, is that the Undo doesn't remove the drawing operation, instead it seemingly wipes the sprites in my current block - see higlighted area below:

...but, if I click those sprites individually, they are restored. I can then sometimes click Undo again and it works as exppected, but other times it does nothing.

Add support for alternate sprite animation

During the course of an animation we may need to change a subset of sprite patterns used in the animation or change some rules applied to the animation.

It would be nice to add support for a second (alternate) set of animation frames, which would replace the first (principal) set after a configurable number of frames or even by pressing a shortcut key.

The requirement for this feature is to create an optional set of frames for the alternate set, like a new tab in the UI providing all the existing features already available.

This would be the case for the animation an alien flying in a spaceship and turning his head every few frames. We would need a set of frames for doing the alien flying with his head turned to one direction and an alternate set to do the opposite direction (note that the spaceship keeps moving in the same direction regardless the alien's head position).

I agree this is an extra mile target :-)

Tilemap index tooltips are incorrect for 8px tiles

When in 8px tilemap mode, the tooltip (hover title text) showing each block of four tiles is seemingly stuck in 16px numbering mode.
It would be more intuitive I think to multiply by 4, so the last tile shows as index 252, or perhaps a range, "252-255". Even better would be to have each tile have four tooltips showing the exact index, so the very last tile quadrant would show 255.

Note, this is more obviously a bug when you enable "show index overlay" as then the (correct) overlays in the main tilemap do not match the tooltips.

Feature Request: export map as PNG

It would be cool if we could export our maps as single image PNGs for making notes, printing, sharing etc.

Request: undo option for Tilemaps

An undo would be really helpful, as if you wipe out a tile by accident, it can take a while to relocate it and fix, especially if you have lots of similar looking tiles :-).

8px sprite paste doesn't select correct sprite

In 8px mode, if you copy/paste a sprite, the currently selected sprite should be the one you just pasted, like in 16px mode.
eg:

Inthe above screen shot I have pasted from the top left position to the bottom right. But if I then start editing I will actually still be editing the original (top left) not the newly pasted one.

16x17 I can't paint in the bottom row.

I get the same behaviour when I start from scratch, using your default 16x12 map. If I change it to 16x17 I can't paint in the bottom row. I think you're doing a y bounds check but using the x value instead 🙂.

8px sprite fill tool bug

In 8px sprite mode, if you have a sprite like this and try and fill the area shown:

You get a stray pixel in the top left corner, like this:

The same test in 16px mode fills as expected.

Doesn't like dot commands

10  .ls

causes a parse error

Feature request: Sprite animation preview

It would be awesome if we could preview what our sprite frames look like when animating.
The UI would, I guess, allow you to set:

a start and end index for the frames
loop or "bounce" when end frame is reached
delay between frames
background colour for transparency mask (note this would be handy as a preview even for a single frame)
(optional phase 2 enhancement) allow the preview sprite to be variously scaled, for people who want to use that feature in their game.

Ideally, this would be implemented on the same tab as the sprite editor, so pixel edits can be seen in realtime.

Thanks as always!

Captured from fbgroup

Sprite selected should be numbered on screen somewhere.
Same on sprite editor window - 2x2 checkerboard space outlined or delineated as a single cell.
Show palette colour index number under colour queues?
Each actual sprite (2x2 checkerboard area) framed in red maybe?
When you shift+click to switch to erase mode - could this act as toggle ? Currently sticks at erase (bug)
Colour used history is very useful - could some colours also be locked into separate queue?
Would be great to have a recolour option - so colours in locked list could be reselected and all pixels in sprite changed to match?
Spritesheet could do with grid checkerboard fading by 50% or so.

Feature Request - Copying Sprites from one sheet to another

Feature of being able to load two sprite sheets and copy sprites from one to another.
i.e. I have one sheet with a sprite that took ages, and I want to copy that to my other sprite sheets... thanks in advance...

Download TAP bytes as .bas misses the last line

I was testing with Dave Clarke's Zoosters demo, and extracting the first program fails to pull the last line, but works fine when reading raw binary.

Binary doesn't encode properly

Test:

LET a=BIN 00001001

Results in on screen result of

LET a=BIN 1001

Which appears to be the same, but is actually being stored as the value 1001 (one-thousand and one)

31 30 30 31 0E 00 00 E9 03 00
1  0  0  1  |--5 bit number-|

Working example: https://zx.remysharp.com/bas/?id=319a30b0a07b4d054c780e43e31e64e3

another 'capture' of a few points, sorry

Sorry Remy not sure if you'd prefer them itemised & detailed, happy to come back and expand this if so.

Could we set dimensions of the tile map editor? I guess that means the map display area might need to be a scrollable window etc.
I've had some trouble loading a tile map file back in, I can drag it onto the tab but I get something weird back out (is it reading the header as tile data?) Not sure if I'm doing something wrong but happy to make a video or send you tilemap files etc. The maps I'm saving are working great on the machine so I think it's the process of loading back in I'm having trouble with.
I've done this now but might be handy to either give you my sprite sheet, or have an option to just generate a 'numbered' set of sprites. So as well as a blank set, you can have a set of numbered tiles (ie, the image on the tile is a number) that can be used and edited as things develop, especially if you're working in a team. I do appreciate that this is niche and once you've made a set, you've always got it handy anyway. :-)

The other stuff I was thinking about thus far, you seem to have already done or got in your previous issue capture. :-)

Priority colours in palettes

Hi Remy, this is more of a question that an issue.

I noticed that in the SPRITE palette tools, there is a tick box for "has priority". I assume this make an index appear in front of other colours (even if present on a background layer).

My question is: Do you know if this functionality is working for Palettes loaded into SPRITEs or LAYERs in NextBASIC?
I added a priority tick box to a colour index, but it didn't change the codes of the "Manual edit" window. Should it do so?

Sprite tool, cut & paste seems to be broke on latest version.

Hi Remy, appears the latest version of the online Sprite tool, the cut and paste sprite functionality has stopped working... thx

Add support for relative sprites in the animation tool

The sprite engine provided with the Next machine features relatives sprites, which allows us to use more than one sprite to compound a bigger or layered one. Relative sprites can be one of two types: Composite ou Unified.

Composite sprites can have some of their attributes relatively set to their anchor sprite, namely: x and y coordinates, visibility, pattern number and palette offset, whereas Unified sprites inherent some of their anchor's attributes, like scale, rotation and mirroring.

Extending the sprite tool to support the creation/animation of relative sprites would be great for a number of reasons.

A few requirements I can think of now:

For the whole animation define an anchor sprite and optionally set its relative sprites (all must be of the same type)
For each relative sprite/frame, define its relative parameters (x and y coordinates, pattern, palette offset, scale, rotation and mirroring). If an attribute is not set in a frame, it means it doesn't change in that frame from the previous one.

This feature, atop of the previous issue, would greatly improve the sprite tooling.

With these features we could compose and animate an energy bar using the provided sprite sheet. Even further, we could change the colour of the energy bar when it reaches a low level by changing its palette colour index/offset.