Jump to content
Asmusr

Raphael

Recommended Posts

Magellan is great for making 8x8 characters for a tile map, but it falls short when you want to create bigger graphics. For my raycaster project I also needed an editor that could work with rectangular pixels, e.g. 4x1, and could shift an image left/right/up/down to check that textures were wrapping seamlessly. I couldn't find an existing bitmap editor that fulfilled these criteria, so I decided to create my own, browser based editor Raphael: https://raphael.js99er.net/ (named after the artist contemporary with Magellan).

 

The colors palette is limited to that of the 9918A. It supports the color restrictions of bitmap mode and graphics mode but can also be set to work without restrictions. It's really slick and easy to use, but is subject to the usual limitations of a browser (no save - only save as, for instance). The import/export options are, at the moment, limited to assembly and my own needs, but if anyone would like to use the application and has suggestions for import/export formats please let me know.

  • Like 15

Share this post


Link to post
Share on other sites

This looks great! Could you include a hex-output for basic for monochrome bitmaps, i.e. one line with 16 hex-digits per (nonempty) 8x8 field? I already love the PNG import after the first try...

 

Thank you!

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, SteveB said:

This looks great! Could you include a hex-output for basic for monochrome bitmaps, i.e. one line with 16 hex-digits per (nonempty) 8x8 field? I already love the PNG import after the first try...

 

Thank you!

That should be possible. Please provide an example of how you would like the output to look.

  • Like 2

Share this post


Link to post
Share on other sites
Posted (edited)

It is a cool tool, I like to draw, and I ONLY know BASIC and Ex B. I would love to get a "FFE58FFCDFFEFFAC" out from every "box" so that I can take that info right into the TI! (and see it on the screen)

And... I was typing in a program that made a huge pic. of a bulls head. It would be cool to be able to use your tool to put IN "FFE58FFCDFFEFFAC" in a specific place to see if I typed in the correct letters and numbers and if I did not, I can then use your tool to fix it and export the new update out again. So if I have a huge pic. with (8*8)*5 pr. row and 5 rows to make a huge pic.

Make sense?

Again I like your tools ;)

Edited by oddemann
Trying to be clear :p

Share this post


Link to post
Share on other sites
Posted (edited)
15 hours ago, Asmusr said:

That should be possible. Please provide an example of how you would like the output to look.

Just like @oddemann wrote, an easy way to get the Basic/XB pattern strings in and out, either per text-file or on the screen, whatever is easier to implement. 

Edited by SteveB

Share this post


Link to post
Share on other sites
1 hour ago, SteveB said:

Just like @oddemann wrote, an easy way to get the Basic/XB pattern strings in and out, either per text-file or on the screen, whatever is easier to implement. 

So you're not interested in any color information, and order and separators don't matter?

Share this post


Link to post
Share on other sites
1 hour ago, Asmusr said:

So you're not interested in any color information, and order and separators don't matter?

Well, in Basic things are monochrome when not using TML or something special. As it heavily depends on what you are gonna do with the graphics there is no general answer to the best format. When you build a landscape it is different from when you do CALL MAGNIFY(3) sprites. So any format where each 8x8 square results in an CALL CHAR type 16 digit hex-string would be fine. If you write a file with eight 16 digit hex-strings, seperated by comma, times 8 lines for all 64 8x8 squares, I would be more than happy. Use the selected background as "0" and every other color as 1.

 

If nobody else has a special wish for the format...

Share this post


Link to post
Share on other sites
Posted (edited)
19 hours ago, SteveB said:

Well, in Basic things are monochrome when not using TML or something special. As it heavily depends on what you are gonna do with the graphics there is no general answer to the best format. When you build a landscape it is different from when you do CALL MAGNIFY(3) sprites. So any format where each 8x8 square results in an CALL CHAR type 16 digit hex-string would be fine. If you write a file with eight 16 digit hex-strings, seperated by comma, times 8 lines for all 64 8x8 squares, I would be more than happy. Use the selected background as "0" and every other color as 1.

 

If nobody else has a special wish for the format...

I have added an export option "Hex string (1 bpp)" that generates a text file. I put each 8x8 character on a separate line because I don't want the format to depend on how big the image is. Since I don't use BASIC I hope you will test it and report any issues here in the channel.

Edited by Asmusr

Share this post


Link to post
Share on other sites

Is this possible? (top example)
Then there is a separation, and it makes it easier to copy the right amount of date. And it has somewhat of a good overview.


Top one reflects how you put it out, but me personally, would like to get in the same "format" as your setup, where you draw. Second example.

0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000
0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 
0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 
0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 
0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 
0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 
0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 
0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 0000000000000000 

 

Share this post


Link to post
Share on other sites
12 minutes ago, oddemann said:

Top one reflects how you put it out, but me personally, would like to get in the same "format" as your setup, where you draw. Second example.

So each 8 pixel row in the image would generate one line in the output? Yes that make sense. If I do that, maybe you also want each string to be quoted and separated by comma?

"0000000000000000","0000000000000000","0000000000000000","0000000000000000"

Share this post


Link to post
Share on other sites
Posted (edited)

I changed the output to:

"FFFFFFFFFFFFFFFF","FCFCF8F8F8F8F8F8","80808080A0A0D0D0","FFFFFFFFFFFFFFFF"
"FFFFFFFFFCFCF8F8","F0F0F0F0EBEBE8E8","D0D09090D3D3CCCC","FFFFC0C0C0C0A0A0"
"F0F0E0E0E0E0E0E0","AAAABABA80808080","C0C0808080808080","90909090E8E8E8E8"
"C0C0C0C0E0E0E0E0","80808181FCFCB6B6","EFEFA7A7AFAF8080","E8E8E8E8A0A0A0A0"
"E0E0E0E0E0E0E0E0","E6E6E6E6C3C38383","808080808080E0E0","A0A0E0E080808080"
"E0E0E0E0E2E2E2E2","8080C6C6C6C6C6C6","A0A0C0C08282C0C0","8080E0E0C0C08080"
"F7F7FFFFFFFFFFFF","8686F8F8F8F8FCFC","C0C080808080E0E0","FFFFFFFFFFFFFFFF"
"FFFFFFFFFFFFFFFF","FCFCFCFCFEFEFFFF","E0E0C0C0C0C08080","FFFFFFFFFFFFFFFF"

That is with a 64 pixel (4 characters) wide image.

Edited by Asmusr
  • Like 2

Share this post


Link to post
Share on other sites

Your the best!!!

Did not even think about " and , - Now, just copy it and make it to data and then two for-next loops and the pic is drawn :p ;)

 

3 hours ago, Asmusr said:

I changed the output to:

"FFFFFFFFFFFFFFFF","FCFCF8F8F8F8F8F8","80808080A0A0D0D0","FFFFFFFFFFFFFFFF"
"FFFFFFFFFCFCF8F8","F0F0F0F0EBEBE8E8","D0D09090D3D3CCCC","FFFFC0C0C0C0A0A0"
"F0F0E0E0E0E0E0E0","AAAABABA80808080","C0C0808080808080","90909090E8E8E8E8"
"C0C0C0C0E0E0E0E0","80808181FCFCB6B6","EFEFA7A7AFAF8080","E8E8E8E8A0A0A0A0"
"E0E0E0E0E0E0E0E0","E6E6E6E6C3C38383","808080808080E0E0","A0A0E0E080808080"
"E0E0E0E0E2E2E2E2","8080C6C6C6C6C6C6","A0A0C0C08282C0C0","8080E0E0C0C08080"
"F7F7FFFFFFFFFFFF","8686F8F8F8F8FCFC","C0C080808080E0E0","FFFFFFFFFFFFFFFF"
"FFFFFFFFFFFFFFFF","FCFCFCFCFEFEFFFF","E0E0C0C0C0C08080","FFFFFFFFFFFFFFFF"

That is with a 64 pixel (4 characters) wide image.

And a gift for you ;)

 

Spoiler
100 CALL CLEAR
110 BOX=33

300 FOR ROW=3 to 10
310 FOR COL=3 to 10
320 READ A$
330 CALL CHAR(BOX,A$)
340 CALL HCHAR(ROW,COL,BOX)
350 BOX=BOX+1

400 NEXT COL
410 NEXT ROW

500 DATA "0000000000000000","0000000000000102","000000011A40AC01","00001B6413C03306","0010463811670D21","000080A0CC8E2928","0000000000008040","0000000000000000"
510 DATA "0000000000010002","001F114088560001","8412206A00042468","431883480488A027","6A7003191CD89021","0ED120401C033ECD","B04C162601C6396D","0000000000008080"
520 DATA "0004010000040006","000004618F890148","040000F8BA230C41","E0F40E040006050C","43449C070E1F0291","C6CD0C6100070E34","0723B31392200380","00C000C0C0E0C030"
530 DATA "0006000202020102","00240204000000C7","010200B200000988","000850F0180800A6","88FEF8F0E0634052","40C0802A034F1917","180C9D3E70F8E884","E07030F03878341C"
540 DATA "0102000204000802","1C60000404344548","000972C40904880A","0001F89284404093","84310043CF2400AE","B8200064FE0F0526","8001700E00E0FE1F","466B27122C2111FF"
550 DATA "1110102202022020","0C048C448C000999","4C18700060804010","48120C1813CD0F01","220A8C183C808010","0C4C0423772F4F4E","F300948EC381C183","B305C4208026F118"
560 DATA "1202101002120208","8183880420024240","0800000040001010","0607038401428482","3030780606C3CB4F","E4B8181A32110504","3F2F0F6B79E10107","0D890999B370F078"
570 DATA "0208000908020804","408480010100A020","002410A00090880C","2021303030380603","3E28046E18004000","064E9EE6860E1A72","06463E1E01103919","7C0F231138F0F0E0"

 


Drawn and copied out to data lines!!!

SO COOL!!! A TOOL!!!

Share this post


Link to post
Share on other sites
Posted (edited)

OK, What is "Raphael" trying to show you... a "famous" picture in the style of TI!
@Asmusr, your tool is so good that I ran RIGHT into the roof of how many CHAR I could use! If I did some optimization I could maybe take out all noting(00) and all only ONE "FFFFFFFFFFFFFFFF" to save, CHAR. But... it is still limited.

But  - Can you or anyone else see it, it is a picture associated with a game?


Updated... and working!!!

So what do you associate with that picture?
 

Spoiler
100 CALL CLEAR
110 BOX=33

300 FOR ROW=11 to 18
310 FOR COL=1 to 16
320 READ A$
325 IF A$="FFFFFFFFFFFFFFFF" THEN 600
330 CALL CHAR(BOX,A$)
340 CALL HCHAR(ROW,COL,BOX)
341 REM CALL HCHAR(24,32,62)
350 BOX=BOX+1

400 NEXT COL
410 NEXT ROW

450 GOTO 450

500 DATA "BE2E2707070100B0","040307F3E7C34303","FFFFFFFFFFFEFFFF","E8EFFFFFFEBE3F35","00E0380406030303","0000000002A0E0E0","0000240000402010","2301000080400000"
505 DATA "C6E0809060703000","00011F1F07040000","BFFFFFF8E8400000","8080000000010303","7F7F3FFFFFFFFFFF","C0E0E0F0F0F8FFFF","1F1F0F070321F0F0","FFFFFFFFFFFF7F3F"
510 DATA "C8FCC0801E3F3CF0","03077F160343F005","FFFF7FFFFFFFFFFF","B2B9FCDBFFFFFFFE","C39F3F3FBFFD0F37","E0E0F0F4FEFEFCFD","00000000000000F0","0000800000400070"
515 DATA "380400002C010007","10F8FD7F7F034080","1010B2FFFFFFDF84","07BEFFFEF8C0C000","FF9F1F1F3F3F3F7F","FFFFFFFFFFFFFFFF","F0F0F0F8FCFCFFFF","3F1F1F0F030080C8"
520 DATA "E1E7EFFFFFFEFEF1","F0E0C203C37C2818","7FFFFFFF7F7FBF3F","FFFFFFFFFFFFFFFF","EFCFFDE0F2C0E0FA","FFFFFF5700790000","FCFCFEE6F000FC00","0030200000000000"
525 DATA "0703010303030100","C0C0F8F99D8080F9","00C008C84CD8018F","00000103475EFCFD","7FFFFFFFFFFFFFFF","FFFFFFFFFDFEFEFE","FFFFFFFFFFFF7F7F","CCE7F8FCFEFEFFFF"
530 DATA "F8FFFFFFFFFFFFFF","66EEFFFFFBBF7FFF","1F3F7B870F7FFFFF","FFFFFFFFFFFFFFFF","FEEFD1E1CCF4F2FA","6266EEFEFFFF7F3F","20C3C7CEFCFCFCFC","301C3F3F1F1F1F1F"
535 DATA "0008C0E0F0F8F8F8","FF67FFFF7F736000","FFFFFFFF8F000000","FDF9F9F8F878783C","FFFFFFFFFFFFFF7E","FFFFF3F77B373F5E","3F3D199C981C1818","FFFFFFFFFF7F7F7F"
540 DATA "FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFE","F8FDFDFFFFF88000","3F9F1FCE00000000","84C0C00000000060","1F1C000000033F39"
545 DATA "F80000007CFDFFFF","00031EFFFFFFFFFF","00000C98FFFFFFFF","1C00000000D0F2F3","3C100021703F3D31","0000000000000800","18183C3C7CFF1606","7F7F7F3F3F7FFFBF"
550 DATA "FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","F8F8FFFFFFFFFFFF","002FFFFFFFFFFFFF","01F8F8F8FAFFFEFF","F090584824267203","0989814949412006"
555 DATA "FFFFFFFFFFFFFF7F","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFF9F1E1E1C0C0","8898BEED1DB7977F","0110B0E2E6E78BEC","180988841029D17A","8FC7C34180C0C0C0"
560 DATA "FFFFFFFFFFFFFFFF","FFFEFEFEFEFEFEFE","FF6F7F7F7D7D7F7F","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","0737C30080E2EBE7","9080C0607038A081"
565 DATA "3F3F3F1F3C6000C6","FFFFFFE03E000000","FFFFFF0007000000","C0802000E0600001","0F01333701000000","4CDFC3C321030302","7D7D898303070707","E0F8D8F2FFFFFFFF"
570 DATA "FFFFFFFEF6D081C1","FEFFEF9B69C38400","170D1F1F9F8FC800","FFFFFE8E8C800000","FFFD71410303030F","FFFFFFFFFFFFFFFF","EFDFDEFCFDFDFCFE","430F5FFFFFFFFF7F"
575 DATA "E3FFFFFDFDFFFF00","80F0F8FCF4BFE300","000003078080E002","0000402080000000","0000000001030C3E","060444ECECE0F1F0","0F070F0F0F1F3F3F","FFFFFFFFFFFFFFFF"

600 CALL CHAR(143,"FFFFFFFFFFFFFFFF")
610 CALL HCHAR(ROW,COL,143)
620 GOTO 400

 

 

Edited by oddemann
Update...
  • Like 1

Share this post


Link to post
Share on other sites

 

Raphael!

 

Spoiler
Raphael

100 CALL CLEAR
110 BOX=33

300 FOR ROW=3 to 10
310 FOR COL=3 to 10
320 READ A$
330 CALL CHAR(BOX,A$)
340 CALL HCHAR(ROW,COL,BOX)
350 BOX=BOX+1

400 NEXT COL
410 NEXT ROW

500 DATA "FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFDF5FCE0","FFFFECF580011228","FFFF47B141980201","FFFFFDFF7FBF7FAF","DFFFF5FFFFFFFFFF","BFDFEFFFEFFFEFFF"
510 DATA "FFFFFFFFFFFFFFFF","FFFFFEFAFDF5F8FA","8800020000400040","0428020204040000","4922954011063081","3FEF3F3FFF5FFEFF","FFFFFFF5FFBEFFFE","FFFEFB55FFFAFFF5"
520 DATA "FFFFFFFFFFFFFFFF","F0EAD4E0E0E1A2E0","01023F39EB4C9810","A2D0FC3268DD3ED5","411745A387378707","FFDF7FDFFFF7FFFF","FFFFEFFDFFFFFEFF","DFFFFEF75FFFFFFF"
530 DATA "FFFFFFFFFEFFFFFF","8442E042E1E0D088","276F9F2A28004201","1BB02F3062A01400","278B2303A2110058","17ADDF7FC57B85FF","FFFFFFFFFFFEFFFF","FDF7DFF7FDF7DBFE"
540 DATA "FFFFFFFFFEFEFBFF","C440C240A8449440","0000002048020024","000208D404A04112","8A100821A8416FAF","4B6635310DBBFD67","FFFFFFFFFFFFFFFF","FBFFFBFFFBFFFFBB"
550 DATA "FFEADFFDFDFFFEFF","C28A74A040EB106C","3009140800041202","00540180A20010A8","5DA2099548950A7F","A5F9FB5F35AFF5B5","FFFFFFFFFFFFFFFF","FFFFDFFFEEBFF7FF"
560 DATA "FFFFFEFFFFFFFFFE","916895408DE27096","54364A2402240250","0280A80010010451","F40A054A13460521","5BB57BFFEBFF4B3F","FFFFFFFFFFFEFFFF","FFFEDDBFFFDFFFFE"
570 DATA "FFFEFEFEFDFFFFFF","6854054564BA0417","A0A69569E9D53E89","0228CDAAED31FF29","0C050AA1FA5FFF7F","5FFFAFFFFFFFFFFF","FFFFFFFEFFFFFFFF","FFEFBDFFFFFFFFFF"

1000 GOTO 1000

 

 

  • Like 2

Share this post


Link to post
Share on other sites
On 5/22/2021 at 1:04 AM, oddemann said:

@Asmusr, your tool is so good that I ran RIGHT into the roof of how many CHAR I could use! If I did some optimization I could maybe take out all noting(00) and all only ONE "FFFFFFFFFFFFFFFF" to save, CHAR. But... it is still limited.

Check XB256, where you have 256 characters on Screen 2. 

  • Like 2

Share this post


Link to post
Share on other sites

OK, one more request...

I want to make a challenge to some people here! And then I have to make some more HEX data.
Is it possible to make it so that I can Import the same HEX file you made in Export? I want to take some of the files I made in Raphael and mirror them, as you have that tool in Raphael. Now you just have Import of PNG. I guess I should have saved them as a file to then be able to get back to them. But... live and learn!

Again... it is a great tool. Made a lot of new possibilities and also to faster execute them. 

Share this post


Link to post
Share on other sites
Posted (edited)

This re-load function would be fine for me as well. 

 

But I encountered another problem I can't explain yet. I made a screenshot of Q-Bert, isolated him in 16x16 pixel, saved as PNG and successfully loaded that file in Raphael. I moved Q-Bert in the top-left corner where he fits in 16x16 pixel. 

 

It mostly worked, but there are some unexplainable "FF" lines in the text-export, i.e. the second char in the first line starts with "FF" but I expected "00", see my screenshot and the attached export. I also tried to replace the background with the top-left color, with the same result.

 

What am I doing wrong? All "00" become "FF" in my example. Which color should I use to make sure the background remain "00" ?

 

1500841218_RaphaelQ-Bert.thumb.png.bd61ccc1638ef59edefd92361e410a79.png 

 

"E0C08080F2F2FFFF","FF80C0C0BF9FF8FE","F0F0F0F0F0F0F0F0","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","7F7F7F7F7F7F7F7F"
"FF8080C0EDE8C4E2","FF9989F9FFFF8080","F0F0F0F0F0F0F0F0","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","FFFFFFFFFFFFFFFF","7F7F7F7F7F7F7F7F"
 

Q-Bert_02.png

qbert02.txt

Edited by SteveB

Share this post


Link to post
Share on other sites
6 hours ago, SteveB said:

What am I doing wrong? All "00" become "FF" in my example. Which color should I use to make sure the background remain "00" ?

Your selected background color is transparent but the background of q-bert is black. Try to make them match.

  • Like 1

Share this post


Link to post
Share on other sites

It is not self-explaining that the export is based on the current settings of Foreground/Background. I got it to work now. You need to select the right tone of red as foreground and black as background. If you pick green or the wrong red as foreground, the resulting export looks rather random. 

 

If used correctly this tool is really helpful, thank you.

Share this post


Link to post
Share on other sites
6 minutes ago, SteveB said:

It is not self-explaining that the export is based on the current settings of Foreground/Background.

You suggested it.

On 5/21/2021 at 12:14 AM, SteveB said:

Use the selected background as "0" and every other color as 1.

 

Share this post


Link to post
Share on other sites

Touché ... usually nobody follows my suggestions by word... 😉

  • Haha 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...