JavaScript motion picture experiment

While developing Curse of Wallachia, I was assaulted with a great curiosity: Would it be possible to emulate the way traditional film movies work using javascript?

The idea was pretty simple: Emulating the “film strip” as individual frames moving quickly (very quickly) on the screen, and then having an overlay area act as a shutter, synchronized with the film strip so that it showed a single frame at a time.

I decided to stream my adventure, which involved a lot of exploring the different options. You can check it out here and here

The goal was to make it so that the movie played at lower FPS than the actual game was running. I ended up doing the following calculations:

Given:

  • SHUTTER_HEIGHT in Pixels.
  • TARGET_FRAME_RATE in Frames per second

Then:

  • MILLIS_PER_FRAME = 1000 / FRAME_RATE
  • SHUTTER_SPEED = 1000 / TARGET_FRAME_RATE
    • in Milliseconds per shutter cycle
    • Each shutter cycle consists on it being opaque and then transparent for the same amount of time.
  • FILM_SPEED_MILLIS = SHUTTER_HEIGHT / SHUTTER_SPEED
    • in Pixels per millis
    • How quick should the film move so that a single frame is shown for each shutter cycle.
  • FILM_SPEED = FILM_SPEED_MILLIS * MILLIS_PER_FRAME
    • Converted to pixels per frame.
    • All sprites in the film strip move this distance on every frame.

Here are my observation after the first try:

  • It’s very hard to time the sprites correctly to move at this high speed and sync their position with the shutter. This is caused in part by the varying real frame rate and the high precision required for the timing.
  • Even if this was possible, having the shutter block the image 50% of the time reduces its brightness a lot (if I’m correct, they fixed this using stronger reflectors historically).
  • Ultimately, I missed the fact that the persistence of vision effect wouldn’t be achievable at low frame rate speeds so in order for this to work I’d have to work with higher frame rates, complicating the emulation even more.

I decided to give up this idea. I realize I may be doing something wrong so if someone wants to take on the challenge (or elaborate on why it’s not feasible) please post in the comments!

Later on I thought on alternatives to achieve my goal, I figured the only way to go was is faking both the Phi phenomenon and the Persistence of Vision effect as follows:

  • Keep the motion of the “film strip” using the same previous calculations.
  • Remove the shutter altogether, instead put a “still frame” sprite on top of the film strip. (This simulates the persistence of vision effect)
  • As the sprites from the film strip come close to a the “still frame” sprite, “burn” the sprite image into it. Since the film strip is moving quickly, this will simulate the phi phenomenon at lower speed (giving it the desired “retro” feel).

Here are the results:

 

I’m pretty happy with these results, admittedly I could have cheated and just put a blurb of pics as the film strip, since they are barely noticeable when over 8FPS… but this was fun and I think it feels more authentic 🙂

Finally, I made the still frame move around a bit when captured to simulate a bit of “jankiness” and imprecision.

cinema-janki

If you have followed the development of Curse of Wallachia, you may have an idea what I’m going to use this for.

Curse of Wallachia, further dev

So, you must know what this is about if you have seen Netflix’s Castlevania animated series. If not… go now and come back here 🙂

The goal for now is to create a video for the Prologue and Stage 1 (covering about 1.5 episodes).

Day 5

  • Add whip animation

Since the whip sprite moves around the player, implemented my own simple animation handler for the weapons.

Day 6

  • Make priest draw staff in cutscene
  • Attack priest on cutscene

Day 7

  • Add support for “hostile” npcs / monsters (chasing the player around)
  • Create sprites for “Knife Monk” including walking animations based on Grant’s

Day 8

  • Make NPCs attack player when close
  • Add attack animations for NPCs

Day 9

  • Show UI on top
  • Make enemies damage player when attacking (and knock player back)

Spent some time trying to offset the position of the layers created by Phaser’s Tiled map loading functions but didn’t have luck. In the end decided to add 4 rows of blackness on top of the maps 🙂

Likewise, had to add another slight hack for the collisions between the player and hostile NPCs, since the normal collisions would trigger the physics system meaning the sprites being pushed around (which doesn’t look a lot like the original). So instead of doing a normal sprite vs group collision I’m manually checking the intersection between the sprite bodies.

Curse of Wallachia – First Days of Dev

Day 0

  • Hesitated to work on this, tried to team up with someone
  • Considered different alternatives for engines.

Day 1

  • Decided to go ahead with Phaser by adapting the OAX6 engine
  • Created test maps
  • Can move sprite around with walking animation

Day 2

  • Arcade Physics, Jumping
  • NPCs moving around
  • Stage transitions
  • Talking to NPCs
  • Started work in portraits, using the amazing 8bit photo lab

Day 3

  • Design levels and intro
  • Added support for lowercase letters and portraits to dialogs
  • Started working on cutscenes support, added simple timed dialogs

Day 4

  • Added animation for dialogs to display one letter at a time
  • Added full Engrish script for cutscene 1

 

Design and technical details about OpenArthurianX6

Adding a bit more detail of the features of OpenArthurianX6. You can still contribute to the campaign (23 days left).

What kind of game will you be able to create?

The engine will allow you to create 2D top down RPGs using orthogonal grid maps with an hybrid real time / turn based mode (real time for normal gameplay, turn based for combat).

The core of the engine is inspired by the Ultima VI engine, which means you can model your game world as a continuous single scale map where all action takes place (including combat) and you will be able to engage in conversation with NPCs to obtain information and advance through the game and its plot, using plot items to resolve puzzles and uncover secrets and exploring the vast world to find surprises.

Graphics

Supported graphic styles include the oblique perspective characteristic of the Ultima IV engine, as well as a 3/4 front facing perspective similar to traditional jRPGs ala RPGMaker, and a full top down perspective for more symbolic, old school games similar to Ultima V.

The game will include two medieval fantasy art packs from Denzi: one will allow creating maps with an oblique, Ultima VI like perspective, while another one will allow creating older school looking top down games. New art packs will be released as allowed by the campaign budget.

Music and SFX

The engine will support situational music triggered by game events or tied to game locations, as well as sound effects for the game actions. Supported formats are MP3, OGG and WAV.

The engine comes bundled with a basic SFX pack. Music is left to the game developer to find for his own game.

Features

  • Multiple characters party: You will be able to have NPCs and pets join your party, they will follow you around and you’ll be able to command them in combat if needed.
  • NPC Schedules: They wake up every day to go to their jobs and come back home in the night. Schedules are customizable per NPC.
  • Day and Night cycles: Reduced visibility during the night, different enemies activity.
  • Camping: Make camp in the wilderness to recover your strength, beware being ambushed!
  • Party AI: When in battle mode, other party members can act on their own optionally, selecting a proper target for attack or running away based on general parameters.
  • Dialogs: Create an history which is unveiled by talking with NPCs, finding clues and using the information you obtain from the to travel the world.
  • Crafting: Gather elements from the world and combine them between themselves or other items to create new items. Obtain leather from dead animals and create clothing from it, bake bread (of course!), create weapons using metals in a forge, and more!

Platforms

The games created by the engine will be accessible for desktop (Windows, Mac, Linux), mobile (Android, iOS) and also playable from modern browsers.

Supported input modes

  • Keyboard: Movement will be done using the arrow keys, numpad or WASDpad.
  • Mouse and touch interfaces: Movement will be done by touching the map in the cardinal direction the player wants to move (without pathfinding). Drag and drop will be supported for inventory management.

Licensing

The engine will be released under the MIT License, allowing you to use the engine for both commercial and non-commercial works, without you having to include any modifications or additional source code. All community contributions will be welcome of course.

Scripting and Programming

The engine is made on JavaScript, and in case you are going to use it directly (without the scenario creation tools), it will provide a JavaScript API which you could use from your own game’s code. JavaScript is also used for scripting events and behaviors.

 

OpenArthurianX6 campaign underway, some advancements

I have been working on OpenArthurianX6 a bit, just to be able to show what kind of a game the engine would be able to create once its done (and to actually show people this is for reals :))

I added support for “mobs” than move randomly over the level in what I call the “async” mode; this is the default mode when you are not in battle, and everybody acts freely without a given turn order (note that the movement is still grid-based).

actors

The player is actually a mob too, so he shares the code to move around with the rest of the NPCs.

Making the engine is going to be hard but fun at the same time. So many things to have in mind in what would seem to be a simple thing to the untrained eye 😉

The campaign ends in about a month and it’s a bit quiet lately so please contribute and share it if you find it interesting!!

Ananias 2.4 released

Decided to pack a new version, this one contains small but important gameplay tweaks, seeking to make the Arcane, Hunter and Alchemist classes be more fun to play. Full changeset available below.

Screen Shot 2017-06-19 at 12.07.25 AM

Gameplay

  • New skill for Alchemist: Can use reagents multiple times
  • New spell: Momi Gyr (Create Arrows) first circle of Matter magic. Creates a pack of arrows (quantity depends on the magic power)
  • New spell: Rew Ram (Attack self) first cirlce of Mind magic. Makes an enemy attack himself once (works as a ranged attack for wizards)
  • Remove separate spells to recover blunt and edge weapons, add weaker variation of repair weapon
  • Make Hunter start with Momi Gyr spell.
  • Make Arcane start with Rew Ram spell.
  • Reduce MP cost of Kam Va (enchant wand) spell.
  • Change Hunter magic schools to second circle of life and matter.
  • Change Hunter starting magic power to 1.
  • Make starting wands have full charge
  • Cap combat to 13 max

UX

  • Allow closing the action dialog (canceling selection)
  • Tweaks on help screens

Bugfixes

  • Create sprites in case they don’t exist, for the gameover screen
  • Fix issue with magic power 0 when used in empty room
  • Prevent targeting yourself on ranged mode
  • Add key captures for arrows to prevent scrolling when embedded.

Plans for the future

I won’t have a lot of time next month for Ananias, however I have a big revamp in mind related to the structure of the world, and the plot of the game. Also pending are some missing steam achievements as well as fixing the steam overlay and finishing the keyboard command (although 90% of the game is now playable using a keyboard).