Jump to content
haroldoop

BlocklyVN32X - A visual tool for making visual novels for the Sega 32X

Recommended Posts

Hello,

 

This project is a visual tool for making visual novels for the Sega 32X.

It uses Blockly as a visual editor; the design is then used to generate a C file, which is then compiled into a playable Sega 32X ROM.

 

https://www.youtube.com/watch?v=dh5M_RHXBfg

 

The current release is version 0.4.0

 

GitHub page: https://github.com/haroldo-ok/BlocklyVN32X

Topic on SpritesMind: http://gendev.spritesmind.net/forum/viewtopic.php?f=4&t=2409

  • Like 6

Share this post


Link to post
Share on other sites

A little warning about the portable version: WinRAR seems to be failing to deal with the really long node.js paths, causing the extraction to fail.

 

7-Zip, on the other hand, seems to be extracting the files correctly; I would recommend using it, instead.

Share this post


Link to post
Share on other sites

Version 0.5.0 now available!

  • Corrected some bugs on variable creation/renaming;
  • Fixed saving/loading of image blocks;
  • Added progress bars.
Release page: https://github.com/haroldo-ok/BlocklyVN32X/releases/tag/v0.5.0

Portable version: https://github.com/haroldo-ok/BlocklyVN32X/releases/download/v0.5.0/blocklyvn32x-portable-0.6.0.exe

Share this post


Link to post
Share on other sites

Version 0.7.0 now available!

  • Added an overview/search panel;
  • Allow the user to work with multiple projects;
  • Exporting/importing of projects.
Release page: https://github.com/haroldo-ok/BlocklyVN32X/releases/tag/v0.7.0

Portable version: https://github.com/haroldo-ok/BlocklyVN32X/releases/download/v0.7.0/blocklyvn32x-portable-0.7.0.exe

Share this post


Link to post
Share on other sites

Version 0.8.0 now available!

  • Now it is possible to display numbers on the "Say" command. If the string contains something like ${name of the variable}, that part will be replaced with the value of the referenced numeric variable.
Release page: https://github.com/haroldo-ok/BlocklyVN32X/releases/tag/v0.8.0

Portable version: https://github.com/haroldo-ok/BlocklyVN32X/releases/download/v0.8.0/blocklyvn32x-portable-0.8.0.exe

Share this post


Link to post
Share on other sites

Version 0.8.2 is now available!

 

No new features; it was just adjusted so that the generated ROM can run on real hardware.

On real hardware, it starts correctly, but the blinking cursor glitches and the images sometimes fail to appear.

Special thanks go to "Nils" for help in making it work on real hardware.

 

Release page: https://github.com/haroldo-ok/BlocklyVN32X/releases/tag/v0.8.2

Portable version: https://github.com/haroldo-ok/BlocklyVN32X/releases/download/v0.8.2/blocklyvn32x-portable-0.8.2.exe

Share this post


Link to post
Share on other sites

Version 0.8.3 is now available!

All of the memory alignment glitches are now solved. It should run reliably on real hardware.

 

Release page: https://github.com/haroldo-ok/BlocklyVN32X/releases/tag/v0.8.3

Portable version: https://github.com/haroldo-ok/BlocklyVN32X/releases/download/v0.8.3/blocklyvn32x-portable-0.8.3.exe

Share this post


Link to post
Share on other sites

Version 0.9.1 is now available!

  • Now the tool memorizes which was the last open project;
  • Corrected bug with RGB images; now all the images will be automatically converted to paletized ones.

Release page: https://github.com/haroldo-ok/BlocklyVN32X/releases/tag/v0.9.1
Portable version: https://github.com/haroldo-ok/BlocklyVN32X/releases/download/v0.9.1/blocklyvn32x-portable-0.9.1.exe

 

Share this post


Link to post
Share on other sites

Nice idea. Do you have a small C-code snippet available of the output somewhere? Or a complete mini-example?

 

The Atari Lynx has a 160 x 102 screen with 16 colours. It also has a c-compiler with support for TGI graphics and unlimited number of sprites.

 

So if someone would have a good storyline it should be possible to compile the novel also for the Lynx. Currently the maximum cart size is 2Mbytes.

 

Also... Do you have some support for ambient sounds and sound effects?

 

Edit: I already downloaded and created something small for testing it. Nice technology.

Edited by karri
  • Like 1

Share this post


Link to post
Share on other sites

Nice idea. Do you have a small C-code snippet available of the output somewhere? Or a complete mini-example?

Yes, there's a conversion of "The Question":

- Repository: https://github.com/haroldo-ok/the-question-vn32x

- Compiled ROM: https://github.com/haroldo-ok/the-question-vn32x/releases/download/v0.1.1/the-question-0.1.1.32x

 

I'm sending an example of the C output as an attachment to this post.

 

The Atari Lynx has a 160 x 102 screen with 16 colours. It also has a c-compiler with support for TGI graphics and unlimited number of sprites.

 

So if someone would have a good storyline it should be possible to compile the novel also for the Lynx. Currently the maximum cart size is 2Mbytes.

I imagine it could be easily adapted to most hardware, as long as it is sufficiently capable; it would mostly be a matter of reimplementing the runtime library (it only uses just a few functions in practice), setting up some image conversion tools, and changing the makefile to conform to the compiler/toolset utilized.

Perhaps some customization to the IDE code generation routine may be necessary, depending on what kind of additional sources you will need generated.

 

The source code for the IDE is at: https://github.com/haroldo-ok/BlocklyVN32X

And the Makefile, runtime library and a couple of support tools are available at: https://github.com/haroldo-ok/vn32x/tree/blockly-backend

 

Also... Do you have some support for ambient sounds and sound effects?

Currently, there's no support for sound, but it's planned.

 

Edit: I already downloaded and created something small for testing it. Nice technology.

Thanks! ;)

generated-sources.zip

Share this post


Link to post
Share on other sites

Thanks,

 

The lynx needs the bitmaps converted to 16 colours and saved in pcx format. Due to the small resolution I have to create all graphics by hand anyway.

 

I would like to try my hands at creating a Start Trek style story where you play the commander. (And have a lot of clichés from the TV series.)

Due to a very small screen it is better to use images and snappy one-liners for telling the story.

 

"Beam me up scotty, there's no intelligent life down here."

Edited by karri
  • Like 1

Share this post


Link to post
Share on other sites

Thanks,

 

The lynx needs the bitmaps converted to 16 colours and saved in pcx format. Due to the small resolution I have to create all graphics by hand anyway.

I see... there are a few options to implement that:

a) By modifying the Makefile so that it converts the PNGs to PCXs;

b) By modifying the IDE so that it outputs PCX files (instead of png) when preparing for compilation.

You may also have to modify the constants "MAX_WIDTH" and "MAX_HEIGHT" on "image.js" to match the Lynx's screen resolution.

 

I would like to try my hands at creating a Start Trek style story where you play the commander. (And have a lot of clichés from the TV series.)

Due to a very small screen it is better to use images and snappy one-liners for telling the story.

 

"Beam me up scotty, there's no intelligent life down here."

That sounds like it could be a fun game! ^_^

Share this post


Link to post
Share on other sites

I wonder if the sound files could be in the abcmusic notation?

 

I have a pure c implementation of the music player for Atari Lynx at bitbucket directory. Go to contrib/abcmusic/cversion.

 

The music player has a parser that goes through the tune and a driver that sets the audio engine to beep. The parser needs to be called at regular intervals.

 

A typical tune would look like this:

tune = "B>cd BAG|FA Ac BA|B>cd BAG|DG GB AG:|Bdd gfg|aA Ac BA|Bdd gfa|gG GB AG:|BG G/2G/2G BG|FA Ac BA|BG G/2G/2G BG|DG GB AG:|"
So we describe just the notes with durations.

You can then add an intrument token like "I:1" in front of the tune to set the instrument. I have a page describing instruments at https://whitelynx.fi/sounds/

 

We could even agree on a basic set of instruments like
#define BASEDRUM 1

#define HIHAT 2
#define STRINGS 3
...

 

In the tune you could then switch instruments like

I:1 C I:2 cc I:1 C I:2 cc

The Lynx can only play 4 instruments at a time. Usually I reserve one instrument for sound effects leaving 3 instruments for the ambient sounds.

 

For a story you could also just play a simple melody with no background the get into the right mood.

 

In C-code:

abc_play(channel, tune);

So starting an ambient tune would be:

abc_play(0, drums);
abc_play(1, chord);
abc_play(2, melody);

Thanks for thumbs up on the story. Now as the snow is falling I was thinking to name my space odyssey as "Always winter, never Christmas".

 

Hopefully published as a X-Mas present to all those aliens living in Ataria.

 

Perhaps it could be a multi-platform release on December 24th?

 

The blockly storyline source would be available at bitbucket in the contrib section.

Edited by karri
  • Like 1

Share this post


Link to post
Share on other sites

What else do I need to get the code compiled and running?

 

I found out that Windows works for the editor. Can this be run om Android or Ubuntu?

 

I created the start of the story. In the XML file there is absolute references to the resource files.

 

I also don't get how I can say who is talking. There is onl a Say statement.

 

Could you compile this file to see if I got the basics right.

test.zip

Share this post


Link to post
Share on other sites

I wonder if the sound files could be in the abcmusic notation?

 

I have a pure c implementation of the music player for Atari Lynx at bitbucket directory. Go to contrib/abcmusic/cversion.

 

The music player has a parser that goes through the tune and a driver that sets the audio engine to beep. The parser needs to be called at regular intervals.

Well, for retro platforms, the music/SFX would have to be platform specific, anyway, so I see no problem.

 

Thanks for thumbs up on the story. Now as the snow is falling I was thinking to name my space odyssey as "Always winter, never Christmas".

 

Hopefully published as a X-Mas present to all those aliens living in Ataria.

 

Perhaps it could be a multi-platform release on December 24th?

 

The blockly storyline source would be available at bitbucket in the contrib section.

Sounds like a nice idea!

 

What else do I need to get the code compiled and running?

I found out that Windows works for the editor. Can this be run om Android or Ubuntu?

If you're using the "portable" version, and are running on Windows, it should compile for 32X right out of the box, with no additional setup required; it comes with everything included.

 

For Linux, well, the IDE will run, since it uses electron; on the other hand, compiling the ROMs won't work quite right, since it invokes a few command line applications, and I hadn't had time to set up the compilation to work on Linux, too.

 

On Android, well, it would be more complicated, since there's no official electron version for it. Perhaps it would be possible to modify the editor so that it would be run on either electron on Cordova, depending on the platform; making the compiler run on Android would be an additional challenge.

 

I created the start of the story. In the XML file there is absolute references to the resource files.

Yes, it seems the XML is being saved with the full paths to the images; the editor automatically corrects the paths on loading, but it would be indeed nice to save them correctly in the first place. I have opened an issue on the repo.

 

I also don't get how I can say who is talking. There is onl a Say statement.

Whoops, it seems that I kinda missed that detail. It always displays "Test". :P

I opened an issue on that.

 

Could you compile this file to see if I got the basics right.

WishingWell.png and spacecabin.png seem to actually be a JPEG files; reimporting them inside the "Background" tab seems to correct the problem.

Android.png is too big to fit the 32X screen, and has no transparent background. Editing the PNG to add transparency and reimporting it in the "Portraits" tab seems to correct the problem.

 

Also, there seems to be a bug on the code generator that makes it generate two "vn_start()"s if there are no loose blocks. Renaming the label "start" to something else and then creating a loose block that just jumps to it sorta gets around the bug until the code generation can be fixed.

 

Here go the fixed project, plus the compiled ROM. ;)

karri-test-compiled.zip

karri-test-project.zip

Share this post


Link to post
Share on other sites

Thanks.

I may make all the graphics as 640x408. 4 times Lynx resolution. The only inconvenience is the size of the blackly canvas. With a story of a hundred events it becomes tedious to edit it. It would be comfortable to split up the editing into a hundred pages that could be edited separately. Like a book...

Share this post


Link to post
Share on other sites

Hi,

 

I just browsed through the sources and the generator is a bit too low-level for creating code for the Lynx.

 

I actually need the total number of directory entries required to generate the ROM.

 

I may actually end up reading the blockly.xml in python and extract the resources required in the proper order.

 

The output will be a directory structure with separate C-files for every vn_label block. They also get compiled into different segments which makes the output a bit complex.

 

I would like to store the name="IMAGE" elements in their own directory entries. Same for sounds.

 

The story should be split into separate pieces of code by the type="vn_label" statement.

 

At any one time I would have one tune in RAM, one bg image in RAM and one vn_label code object in RAM.

 

The character images would go in the same segment with the code. This takes care of the addressing problems when you have multiple characters on screen.

 

So basically the ROM would look like:

 

  • bootloader
  • directory of ROM
  • resident executable object
  • bg image 1
  • bg image 2
  • ...
  • sound 1
  • sound 2
  • ...
  • start block
  • Morning block
  • DressingUp block
  • OnTheBridge block
  • IncomingMessage block
  • LandingParty block
  • AlienConfrontation block
  • ...
  • HappyEnding block

 

The RAM allocation for blockly on the Lynx would be:

 

  • zero page
  • bg image area (sized by largest bg image)
  • ambient sound area (sized by largest tune)
  • Blockly block (rest of the memory)
  • resident block (minimum size of used libraries and main.c code)
  • C-stack
  • screen buffers (two buffers for non-flickering display)
  • Like 1

Share this post


Link to post
Share on other sites

Thanks.

I may make all the graphics as 640x408. 4 times Lynx resolution. The only inconvenience is the size of the blackly canvas. With a story of a hundred events it becomes tedious to edit it. It would be comfortable to split up the editing into a hundred pages that could be edited separately. Like a book...

Yes, Blockly's interface can become confusing for large projects. In BlocklyVN32X, I tried to make the clutter more maneageble by creating an "Overview" tab that shows a Zoomed out version of the current workspace; clicking on the zoomed out blocks navigates directly to the corresponding actual block. There's also an experimental search panel on the overview tab; it looks ugly, right now, but it sorta works. :P

Even then, being able to divide the project into smaller pieces would certainly be a more scalable solution. I have 2/3 of an idea on how to implement that. ;)

 

I just browsed through the sources and the generator is a bit too low-level for creating code for the Lynx.

 

I actually need the total number of directory entries required to generate the ROM.

 

I may actually end up reading the blockly.xml in python and extract the resources required in the proper order.

 

The output will be a directory structure with separate C-files for every vn_label block. They also get compiled into different segments which makes the output a bit complex.

 

I would like to store the name="IMAGE" elements in their own directory entries. Same for sounds.

 

The story should be split into separate pieces of code by the type="vn_label" statement.

 

At any one time I would have one tune in RAM, one bg image in RAM and one vn_label code object in RAM.

 

The character images would go in the same segment with the code. This takes care of the addressing problems when you have multiple characters on screen.

Another alternative would be to use Blockly's own API for the task; if you take a look at '/blockly/generators/arduino.js', in the declarations of 'Blockly.Arduino.finish', 'Blockly.Arduino.genIncludeMk_' and 'Blockly.Arduino.genImages_' you can see how the sources are generated.

The string returned by 'finish()' is what goes to the C file. Additionaly, in BlocklyVN32X, whatever gets included in the 'Blockly.Arduino.otherSources' object gets written as an additional file on the 'generated' dir.

Share this post


Link to post
Share on other sites

Yes, Blockly's interface can become confusing for large projects. In BlocklyVN32X, I tried to make the clutter more maneageble by creating an "Overview" tab that shows a Zoomed out version of the current workspace; clicking on the zoomed out blocks navigates directly to the corresponding actual block. There's also an experimental search panel on the overview tab; it looks ugly, right now, but it sorta works. icon_razz.gif

Even then, being able to divide the project into smaller pieces would certainly be a more scalable solution. I have 2/3 of an idea on how to implement that. icon_wink.gif

 

 

Another alternative would be to use Blockly's own API for the task; if you take a look at '/blockly/generators/arduino.js', in the declarations of 'Blockly.Arduino.finish', 'Blockly.Arduino.genIncludeMk_' and 'Blockly.Arduino.genImages_' you can see how the sources are generated.

The string returned by 'finish()' is what goes to the C file. Additionaly, in BlocklyVN32X, whatever gets included in the 'Blockly.Arduino.otherSources' object gets written as an additional file on the 'generated' dir.

 

Thanks,

 

I can live with the built-in generators.

 

Perhaps the best way will be to write the story top down in one giant column. It is manageable for now. I was just hoping to write the story on a tablet while sitting in a bus. But obviously I need to write it as a text file first and then copy the results to blockly as an Android blockly is not available.

 

It would be great to get the "Say" function fixed to include a talker.

 

And a similar "Play" function for marking sounds. Perhaps there could be talkers to the Play function also called "Channel0", "Channel1", "Channel2", "Channel3". If your hardware only supports one instrument you could neglect the higher channels. But I suppose that all game consoles should at least have a single voice melody.

Play(Channel0) = "cccc 2z cccc 2z cccc"; //Alarm clock sound (c = 261Hz, z=silence)

Share this post


Link to post
Share on other sites

I wrote a small parser in Python to textify the blockly.xml for the tablet.

 

Here is the output of the example:

Jump to start_2Label: start_2
Background image
Resource: wishingwell
Path: C:\Temp\blocklyvn32x-portable-0.9.1\projects\karri-test\bg\wishingwell.png
Variable: greedy
Number: 0
Variable: spiritual
Number: 0
Text: My mom would always give me a cent or two to throw into the water fountains near Stockmann's Christmas display.
Menu
Option
Text: I reached out to drop my pennies...
Text: I loved the sound of my coins breaking the silence when they hit the water.
Text: The ripples moving all over the wishing well giving my Christmas wish more power.
Variable: spiritual
Operation: ADD
Variable: spiritual
Number: 1
Option
Text: As my mother looked away I hid the pennies in my pocket...
Text: I was saving money for buying the cool video game Galaxian in case Santa just got me soft presents this year.
Variable: greedy
Operation: ADD
Variable: greedy
Number: 1
Text: The Christmas display had lots of small animated gnomes, reindeer, squirrels and other cute creatures all gathering nuts and pinecones for the winter.
Text: The lights slowly changed their colours - yellow, red, blue, violet.
Operation: LT
Variable: greedy
Variable: spiritual
Resource: sylvie_normal
Path: C:\Temp\blocklyvn32x-portable-0.9.1\projects\karri-test\portrait\sylvie_normal.png
Text: Play christmas carol
Text: The smell of gingerbread and warm apple wine was filling the air.
Menu
Option
Text: Hmm. Perhaps I should get some...
Text: Shopkeeper: You are a bit young for the wine, son.
Text: Shopkeeper: Here's a ginger star. Merry Christmas
Variable: spiritual
Operation: ADD
Variable: spiritual
Number: 1
Option
Text: Oh my god! There is Santa
Text: Ho, ho, ho. And what would you like for Christmas?
Jump to Morning
Text: The window next to the xmas display had the latest Galaxian meets the Atarians preview.
Text: I stand as glued to the display watching the clash of the titans when the titans of the Galaxy fight the evil Atarians. 
Text: Only two weeks till Christmas. Will I get it or not?
Jump to Morning
Label: Morning
Background image
Resource: spacecabin
Path: C:\Temp\blocklyvn32x-portable-0.9.1\projects\karri-test\bg\spacecabin.png
Resource: android
Path: C:\Temp\blocklyvn32x-portable-0.9.1\projects\karri-test\portrait\android.png
Variable: sleeping
Number: 1
Mode: WHILE
Variable: sleeping
Text: Play: alarm clock
Text: Breakfast in bed, Captain?
Menu
Option
Text: Naah. Give me 5 minutes more.
Text: Zzz...
Option
Text: Just a cup of coffee to the bridge. Be rigth there.
Jump to DressinuUp
Label: DressinuUp
Background image
Resource: spacecabin
Path: C:\Temp\blocklyvn32x-portable-0.9.1\projects\karri-test\bg\spacecabin.png
Text: Monday... Shit! Forgot to send my uniform to cleaners
Menu
Option
Text: ... so I dress up in a T-shirt and jeans
Variable: style
Number: 1
Option
Text: ... not much to choose from. I use the tuxedo from my cousins weddings.
Variable: style
Number: 2
Option
Text: ... who cares if I stink. I am the Captain for Gods sake.
Variable: style
Number: 3
Text: I should really make a note to buy me a second uniform.

blockly2text.txt

Share this post


Link to post
Share on other sites

Perhaps the best way will be to write the story top down in one giant column. It is manageable for now. I was just hoping to write the story on a tablet while sitting in a bus. But obviously I need to write it as a text file first and then copy the results to blockly as an Android blockly is not available.

Blockly itself could run on any browser, but BlocklyVN32X depends on electron. It would be possible to refactor the code so that it could run as a web application, but it would take a while. :P

I once thought whether or not it would be interesting to be able to import/export to twine or inklewriter; maybe that idea could be revisited; it would be far from a perfect process, but it could be useful.

 

It would be great to get the "Say" function fixed to include a talker.

Looking at the source, it does not look very difficult to implement.

 

And a similar "Play" function for marking sounds. Perhaps there could be talkers to the Play function also called "Channel0", "Channel1", "Channel2", "Channel3". If your hardware only supports one instrument you could neglect the higher channels. But I suppose that all game consoles should at least have a single voice melody.

Perhaps I could add it as a no-op, initially, and then add the appropriate block to the IDE.

 

I wrote a small parser in Python to textify the blockly.xml for the tablet.

That would be a nice compromise, since there's no import function. :P

Edited by haroldoop

Share this post


Link to post
Share on other sites

Version 0.10.0 is now available:

  • Added command to choose the name that will be displayed in the top left corner of the text window;
  • Resolved the input lag problem on the generated ROM.
Release page: https://github.com/haroldo-ok/BlocklyVN32X/releases/tag/v0.10.0

Portable version: https://github.com/haroldo-ok/BlocklyVN32X/releases/download/v0.10.0/blocklyvn32x-portable-0.10.0.exe

Share this post


Link to post
Share on other sites

Hi,

 

I have been playing with this a bit now. There is a rough 1st version of the Lynx code created. Here is a small screenshot (not related to the "Always winter, never Christmas"-visual novel).

The font is written for this application. It mimics Arial and it can automatically format the Say statement with the talker.

 

The graphics is just 16 colours at 160 x 102 pixels. Not as nice as for a modern console but ok. Here I use only 6 colours in this Star Wars inspired picture.

 

Spr.data = youaremyonlyhope;
tgi_sprite(&Spr);
say("Girl", "Help me, Obi-Wan Kenobi. You're my only hope.");

 

post-2099-0-18735400-1509964888.png

 

Or the small intro from the real novel.

Spr.data = wishingwell;
tgi_sprite(&Spr);
say("", "My mom would always give me a cent or two to throw into the water fountains near Stockmann's Christmas display.");
post-2099-0-94427000-1509966728.png

 

My experimental target will be maintained here: https://bitbucket.org/karri/alwayswinter/src in case someone would like to support other cc65 targets.

 

There will be scripts in blockly that generate this target source tree. The actual cart binary is created by giving the command "make" in the top level.

Edited by karri
  • Like 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.

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...