Sburb (Formerly Jterniabound)

[Mme Sparklecakes XVII]

Git Repo | Latest Build | Documentation Wiki

WHAT UP

As the person behind all those walkabouts I am uniquely qualified to say that Flash is a fucking douchebag. Yes it's powerful, but that's almost the problem. You try to do something simple and it's all like "whoops fuck you now everything's running at 2x speed and your hit detection is gone".

With that in mind I've started the Sburb Project. The basic point is to rebuild my old walkabout engine purely in Javascript. No Flash. No PHP. All client-side Javascript. In fact, in the current state, you shouldn't have to touch any code at all! An entire walkabout should be createable using strictly the SburbML language I have created. It's human readable and writable, and pretty intuitive! It's about as hard as making an HTML webpage.
---------------------------------
FEATURES:

• Build fully functional and highly configurable MSPA grade walkabouts using just SburbML (no coding, just markup, like HTML)
• Runs in pure HTML5, no need for Flash or any other plugins (though Flash can sorta be used too)
• Render sprite sheets using HTML5 Canvas2D
• Play sound effects and music using HTML5 Audio
• Load custom fonts using @font-face
• Save and load game state transparently to the users computer or browser
• Create dialogs with animated caricatures easily
• Fully open source (BSD Licensed) development and releases (though some branches may be developed in private for MSPA releases)

---------------------------------
TODO:

• The engine's pretty stable at this point. We're working on incremental improvements to file loading and handling, and to the SburbML API itself. You can check out our progress at the git repository, and maybe help out to.
• What I definitely need help with is the documentation for this stuff in the wiki. Proper documentation that shows how to use this thing.
• Adopt a browser! Want to help debug our builds? Subscribe to the git repository or this thread, and whenever we post an update, test it out in your browser. Help us out by providing any notes on regressions or improvements.

----------------------------------
What do I expect from you? Not a god damn thing really. You can help out if you want but I don't really care either way. I'm doing this in my free time for shits and giggles under the employ of Andrew. If you help it might go faster and work better.

Regardless, I've set up a Git repository over at Github, which you are free to fork and/or download files from as you wish, and we're keeping a fairly up to date build over here.

[infiniteAlice]

you seem to have this pretty well under control, also i agree that flash is a horrible entity who's only point in life is to make ours (programmers) miserable, also i would like to help with the graphic portion of the game, i am currently trying to make a game on my own, but i would rather work on something as a collaborative effort which would probably come out better then mine alone. so i am a art major, so throw any project you would like some help with

[Frost]

Are you looking to replace the existing walkaround flashes with this new engine, or are you just making it for future use?

Also, have you considered exposing a simple way to swap out the walkarounds' text? The translation project people would love you for it.

Text rendering is apparently a bitch in JS but it was in AS too so that's not really a big deal.

It's a bit shitty using raw Canvas, but you should bear in mind that if you're using JS, you have access to everything HTML can do. I can't think of any reason why you couldn't overlay a floating, absolute-position-and-size div on top of the drawing canvas, which should make text layout and formatting much easier.

In the flash versions I used a coloured in polygon to determine walkable areas, but JS only lets you read pixels that are physically on the canvas.

You're allowed to have offscreen canvases which aren't visible to the user, to which you can render images, and from which you can read pixels. It might be sort of slow and memory-inefficient, but no more than it would be in Flash.

I had originally intended for something where the user could use assets from their own desktop to build their own characters and stuff, but Javascript is pretty heavily sandboxed so that's not gonna happen

Look up the File API. It's supported in all the HTML5y desktop browsers except IE9.

[Mme Sparklecakes XVII]

you seem to have this pretty well under control, also i agree that flash is a horrible entity who's only point in life is to make ours (programmers) miserable, also i would like to help with the graphic portion of the game, i am currently trying to make a game on my own, but i would rather work on something as a collaborative effort which would probably come out better then mine alone. so i am a art major, so throw any project you would like some help with

At the moment most of the graphics work required is just porting old assets to new formats (gifs to sheets, everything to 300%).

Are you looking to replace the existing walkaround flashes with this new engine, or are you just making it for future use?

Strictily future use. They're all full of dirty hacks and each one uses a slightly different engine. Porting old stuff would be a massive undertaking.

Also, have you considered exposing a simple way to swap out the walkarounds' text? The translation project people would love you for it.

If set up that markup discussed it should be quite trivial, assuming I get the font rendering set up smart enough. In fact this would mean my dialogue markup would be nested inside this new one, weird. I've already given the Russian translation team access to the raw FLA's of all the walkabouts. Most of the text is embedded in the code somewhere, except for the odd gif. If I know anything about Russians it's that they're all in some Mafia, so I'm sure they'll be willing to share those (...for a price).

It's a bit shitty using raw Canvas, but you should bear in mind that if you're using JS, you have access to everything HTML can do. I can't think of any reason why you couldn't overlay a floating, absolute-position-and-size div on top of the drawing canvas, which should make text layout and formatting much easier.

You're allowed to have offscreen canvases which aren't visible to the user, to which you can render images, and from which you can read pixels. It might be sort of slow and memory-inefficient, but no more than it would be in Flash.


Look up the File API. It's supported in all the HTML5y desktop browsers except IE9.

These reek of weird browser compatibility issues, but I'll keep them in mind, thanks.

[Mme Sparklecakes XVII]

Room changing implemented (press space to swap between two very similar rooms).
FontEngine built for pushing text to the screen (demo text box floating in the rooms)

Updates pushed, though I forgot to log the fact that I actually implemented room changing (because I was too excited about font engines, apparently?).

[Mme Sparklecakes XVII]

Actions implemented. Now just need to define different kinds of actions (such as talk, swap character, change room). Javascript's soft typing should make this super easy.

Karclone in the corner there can now be "interacted with" in the usual manner. Obviously there's some cleaning up to do with display and stuff, but It's a good start.

Updates pushed.

[Arsenicum]

This probably sounds stupid, but I would add invisible sprites for the boundaries and then just import the collide code.

I swear, my shortcuts are my undoing in programming.

[Mme Sparklecakes XVII]

Yes this is a last desperate stab dirty hack option. I would prefer to have a single form defining the boundaries though.

[Arsenicum]

You obviously have a function where the boundaries are registered as a variable, because it stops scrolling when you move far enough to the sides. Why don't you take that variable and add an if...then function when the sprite collides, for starters.

Or is that not how Javascript works?

[OrangeAipom]

Will the old Alterniabounds be replaced by these Jterniabounds?

[MaskedClaus]

Will the old Alterniabounds be replaced by these Jterniabounds?

Strictily future use. They're all full of dirty hacks and each one uses a slightly different engine. Porting old stuff would be a massive undertaking.

Guess it's a no.

[Mme Sparklecakes XVII]

You obviously have a function where the boundaries are registered as a variable, because it stops scrolling when you move far enough to the sides. Why don't you take that variable and add an if...then function when the sprite collides, for starters.

Or is that not how Javascript works?

The boundaries are boxes, rooms are rarely perfect boxes. Also camera boundaries!=walking boundaries.

[Mme Sparklecakes XVII]

Serialization and SBURBML implemented!!!!

You can now exactly save a game state into a block of mark up, and load blocks of mark up back up!

wooooo

[OrangeAipom]

By the way, I think you're using the old Karkat walkaround sprites. The horns are shaped differently I guess.

[Mme Sparklecakes XVII]

I grabbed the original sprite sheet that was made for him (before we even started using gifs). Dunno if there's updated ones.

[OrangeAipom]

Here it is.

[Mme Sparklecakes XVII]

Awesome, thanks. File updated (though your cache ma disagree).

[Mme Sparklecakes XVII]

Room boundaries implemented. I decided to go with the defining the vertexes system because it's efficient (with regards to space) and flexible.

Also implemented some of the core actions (talk, swap, roomChange). Talk is still just a pop up. Setting up the dialog box system and implementing a new markup for that will be my next challenge.

I've also done some research and it's looking like native javascript sound playing support is still fairly... bad...? It has subsequently fallen to the bottom of my priorities.

[Mme Sparklecakes XVII]

I implemented a very rudimentary version of the dialogue system. It's missing pretty much all of the bells and whistles of the original, but that's because I'm missing a lot of the resources necessary to implement them fully.

Dear Fan Project People: I have this bizarre feeling there's some sort of massive repository of assets and documentation on the walkabouts floating around somewhere. Does such a hallowed place exist?

More specifically: Does anyone know what font settings various MSPA things use (action prompts, dialogues)?
Does anyone have the raw grey-gradient dialogue box (large version, possibly circa lalondiabound) kicking about?

I am unfortunately unable to boot up Flash in my current circumstances, so I cannot just search through my work. Searching what are literally hundreds of emails and secret forum posts (oh god and PMs too) has proved inefficient and fruitless.

-----------------

I'm also going to start work on adding asset notation to SBURBML so that you can specify which assets to load (instead of simply "all of them"), and what to call them (instead of what I decided to call them). After that I can start dismantling a bunch of my "set up" code and launch things strictly from SBURBML. I might also considering splitting some of the utility functions out of Jterniabound.js into some sort of utils.js, but maybe that would make it a bit too fragmented, thoughts?

[ShadowOfFate]

show spoiler

hide spoiler

Is this it?

More specifically: Does anyone know what font settings various MSPA things use (action prompts, dialogues)?

I'm not sure if I understand, could you possibly elaborate?

[Mme Sparklecakes XVII]

Yes! Thank you!

In regards to your question: back in my day there were a few people who knew exactly what fonts/styles were being used in mspa things. Like "Oh it uses courier new 11pt bold". I've personally forgotten and am having trouble finding what the settings for the dialogues in those lovely grey boxes you just gave me were, and what the settings were for the ">Do something" pop ups. Even if I had a rip of my old code I think I could at least figure out what the pop ups used.

E: I've approximated dialog text to bold courier new 13pt,

E2: It was definitely 14pt, because I remember "8" was somehow important to the text layout, and that's how many pixels wide a 14pt bold courier new character is.

[Mme Sparklecakes XVII]

Massively cleaned up action prompts and dialogue boxes.

All that's really left for dialogue boxes is implementing the talking sprites, and properly parsing character prefixes into colours.

[Frost]

Just FYI, the build linked from the first post isn't capturing keyboard input. The up and down arrow keys make the page scroll. Running Firefox 10 on Ubuntu, similar issues when using Chrome 16.

[OrangeAipom]

Just FYI, the build linked from the first post isn't capturing keyboard input. The up and down arrow keys make the page scroll. Running Firefox 10 on Ubuntu, similar issues when using Chrome 16.

It works fine on Chrome 17 for Windows. o_O

[Mme Sparklecakes XVII]

Just FYI, the build linked from the first post isn't capturing keyboard input. The up and down arrow keys make the page scroll. Running Firefox 10 on Ubuntu, similar issues when using Chrome 16.

I'm running Firefox 10.02 and Chrome 17 in Xubuntu... so our set ups should be very similar. I'm kinda surprised your screen is small enough to even get scrolling happening. I'll try to move the SBURBML box to the side I guess?

E: I'd also appreciate if anyone could take screen shots of some of the text renderings, I'm curious to see how it looks cross platform.