Lost in the Underworld – Day 1, js13kgames

Alright, I decided to participate for the first time on js13kgames!

The plan is to create a cavern exploration game with a huge world and multiple paths on it, where the player has to find treasures and powerups. I also hope this series of blog posts is more informative and useful than usual.

The idea is to do terrain generation on the fly using Voronoi diagrams and Cellular Automata, also I won’t use pixel art but instead vector graphics (at least for the terrain).

After checking some of the options in the tools page, I decided to use Florent Cailhol’s JS13k Boilerplate. It is probably the simpler starter project there… it has some game loop logic, seedable RNG and gulp scripts for packing and minifying. It also comes with a sample simple implementation for physics.

I started adding keyboard support so you could jump and move around.

const pressed = {};

module.exports = {
	init: function(){
		window.onkeydown = function(e) {pressed[e.keyCode] = true};
		window.onkeyup = function(e) {pressed[e.keyCode] = false};
	},
	isDown: function(keyCode){
		return pressed[keyCode];
	}
}

Also did some foundations of the “physics” system based on the original, since the terrain will be irregular, what I’m doing for the collisions is checking if the future position of the player will be located inside one of the polygons. I used the “inside” function from James Halliday Point in Polygon repo, an implementation of the PNPOLY algorithm. There’s still a lot of potential optimizations to be done.

stones.forEach(function(s){
  if (e.dx != 0){
    if (e.dx > 0){
      if (inside([tx+e.w,ty+e.h/2], s.vs)){
        hCollision = true;
      }
    } else if (e.dx > 0){
      if (inside([tx,ty+e.h/2], s.vs)){
        hCollision = true;
      }
    }
  }
  if (inside([tx+e.w/2,ty+e.h], s.vs)){
    vCollision = true;
  }
}

Had to add a special case for high acceleration caused by gravity, which would make the player go though thing barriers because the updated position would just go through it. For this one I’m checking if the line traced from the current position to the future position intersects the polygon, based on a stack overflow response by Dan Fox.

if (e.dy > 100){
  //Prevent falling through thin borders at high acc
  if (polygonIntersects({
    a: {x: e.x+e.w/2, y: e.y+e.h},
    b: {x: tx+e.w/2, y: ty+e.h}},
    s.vs
  )){
   vCollision = true;
  }
}

Added simple camera support, centered on the player, for this I have a camera object whose position I affect along with the player’s. Then I substract that position from the world position of all objects when it’s time to draw them, to translate them to viewport coordinates.

js13k-2

Then I added super simple Voronoi map gen using Raymond Hill’s JavaScript Voronoi, it adds quite a bit of weight to the package but works pretty nice. I may have to slim it down for the final dist.

js13k-3.1

For now, I’m just randomly picking Voronoi cells, next up will use CA for the caverns to look less random.

var voronoi = new Voronoi();
var bbox = {xl: -300, xr: 1450, yt: 0, yb: 3550};
var sites = [];
for (var i = 0; i < 450; i++){
  sites.push({
    x: rand.range(bbox.xl, bbox.xr),
    y: rand.range(bbox.yt, bbox.yb)
  })
}
var diagram = voronoi.compute(sites, bbox);
const stones = [];
diagram.cells.forEach(function(cell){
  if (rand.bool())
    return;
  let vs = [];
  cell.halfedges.forEach(function (halfedge){
    vs.push([halfedge.getStartpoint().x, halfedge.getStartpoint().y]);
  });
  stones.push({vs: vs});
});

Navigating around the map made evident that my physics system still needs a lot of work. I will post it here once it’s more polished so it can be useful for someone.

I found out the core of the RNG module of the boilerplate isn’t working, so made it use Math.random instead for now. It also seems the current gulp tasks don’t work well with some ES6 syntax, I’ll take care of that later.

Current package size is: 7.13 KB

OpenArthurianX6: Design and Planning

I don’t think there’s a perfect way to approach planning this kind of project, so we’ll shoot for one, then once we have done some iterations of it we’ll evaluate and see what’s the best way to continue.

The first iteration of the engine we are looking forward to have is having all basic systems working, keyboard only, desktop only running in a browser.

Capabilities

One facet we are using for planning are actions the player can do

World

  • Move around the map
  • Pick up an item from the map
  • Examine map
  • Examine item on world
  • Examine mob
  • Read book or world feature (signpost, plaque, etc)
  • Examine world feature (find secrets)
  • Open and Close doors
  • Doors with keys
  • Doors opening with buttons / levers combinations

Dialogs

  • Talk with a NPC
  • Asking a NPC to join the party
  • Talk with a Party member
  • Ask a Party member to leave the party

Party

  • Check the status of a party member
  • Set the Tactics / Manual for a party member

Inventory

  • Check the inventory of a party member
  • Drop an item on the map
  • Move an item on the inventory to a container on the inventory
  • Move an item on the inventory to a party member
  • Move an item on the map to a container on the map
  • Check a container on the map
  • Pick up an item from a container to the inventory
  • Examine item on inventory
  • Use item on inventory

Combat

  • Enter and leave combat mode
  • Attack an enemy within melee distance
  • Attack a far away enemy

Engine Aspects

A second facet of planning corresponds to some features of the engine which may or may not be related to the player actions.

Maps

Moving around the map is a capability, but managing and displaying the maps themselves is an important aspect of the engine.

  • Overlay layers
  • Map transitions
  • Multiple stories
  • Day and Night Cycle

Mobs

  • Follow player
  • Select action in combat mode (AI)
  • Select action in peace mode (AI)
  • Schedules
  • Action scheduling in Peace mode
  • Action scheduling in Combat mode

Use Item effects

  • Recover HP (% or fixed value, mob or party)
  • Recover MP (% or fixed value, mob or party)
  • Recover hunger (% or fixed value, mob or party)
  • Enter music mode (Play instrument with keys 0 to 9)

Use Feature effects

  • Light / Extinguish
  • Open or close door
  • Set puzzle flag

Use mob effects

  • Milk cow

The Future – Other iterations

Capabilities

  • Make camp
  • Board a vehicle
  • Move around in a land vehicle
  • Move around in a sea vehicle
  • Move around in a air vehicle
  • Repair a vehicle
  • Attack and object on the world
  • Ride mount

The Ancient Art of War at Westeros Part 2: The Queen of the Iron Throne

The second video for the SlashBit Retro Cinema is up!

While I didn’t invest as much time on this one as I did on the Castlevania one, this one has a long story going back to 2015 when I started working on the map hoping to have something like the video ready before the start of Season 6. That didn’t happen but I pushed forward to finish the 128×256 tiles map and then further worked on it by adding google maps support for it.

shot1

It stayed that way for over a year but with the spectacular Season 7 underway I decided to revive the project and got working on it after finishing the Castlevania one. Ashton created an extended version of the track and I made the sigils of the houses using an EGA palette. I also did some tweaks on the map graphics specially to make some castles and places look more like the ones on the series..

shot2

The first version I created didn’t have the zoom effects. I still think it looks more authentic than the final cut but the feedback I got was that it was hard to appreciate the scale of the world. I am not sure something like this could be achieved back then without a special video card, at least not on a PC with an EGA or VGA card.

I did some research in order to assign the stats for each one of the houses. Most of them are just raw approximates which I thought made sense from the little available data.

Enjoy!

Curse of Walachia, finished

Curse of Walachia is a tribute to the recent Castlevania series on Netflix. It is loosely based on Castlevania 3 so I wondered how cool it’d be if Castlevania 3 followed the same plot as the series? 🙂

This is my first video for SlashBit RetroCinema, a youtube channel where I intend to post similar content (second video is almost ready :))

It took about 17 development days to take this from an idea to a reality. Far much more than I anticipated I would invest. I was pretty happy with the end result, but I should be more cautious in the future regarding what projects to start (since I now feel this religious duty of not letting things unfinished).

I had some plans to include all the content in the show but I had to cut it out. These plans included the catacombs stage with the cyclops boss, Sypha joining, the defense of Gresit, the deep catacombs and Alucard’s fight. I figured out this was enough to show my idea (may be I’ll do these in the future, if there’s interest on them).

Here’s the tools I used

  • JavaScript: This is actually a “playable” game which runs in a browser window
  • Phaser.io: Arcade physics engine, timers, tiled map loading, music playback as well as basic spriteworks.
  • Tiled: To created the tile maps
  • Google Translate: To create the Engrish by translating from English to Japanese and back.
  • 8Bit Photo Lab: Nice tool I used to create the character portraits. Wish there was a Mac version.
  • Quicktime Player: To record the vid from screen capture.
  • Soundflower: To redirect audio output into Quicktime Player.

PS: The Engrish is intentional, of course.

Following are the dev chunks per day (Day 10 to 17)

Day 10

Made the weapons work. This involved positioning them based on the mob heading and position, and manually checking the collision vs targets.

Day 11 

Didn’t advance on the project itself since I jumped into the JavaScript animation side-project side-project. But started writing the intro.

Day 12

Worked on the intro.

Day 13

Finished work in the intro, including assembling some scenes. Also worked on Stage 1-1

Day 14

Level design for stage 1-2 and 1-3

Day 15

Level design for Stage 2-1 including adding the old woman dialog

Day 16

Added Trevor’s dialog to fight sequence and a lot more detail on it

Day 17

Details, Details, Details… and release!

OpenArthurianX6 Campaign Finished

After two months, we managed to raise $3,236 USD (161% of the initial goal). This will allows us to develop the engine and some tools to make it easier to create the games.

Thanks to all the contributors! I have arranged a meeting of dragons and other monsters to celebrate!

OpenArthurianX9 Contributors
All 49 contributors to the campaign

Here’s the list of all contributors! If you want to remove yourself, change your name (or include your dragon name) or put some more info. Get in touch via twitter 🙂

Black Dragons

Dragons

  • Joshua Steele – Wiltshire Dragon
  • Aaron Curtis – Dark Wraith Dragon
  • C. Bruner – Spoony Spoonicus – A lover of classic RPGs with some sweet Ultima Let’s Play
  • Kenneth Kully – WTF Dragon – Maintainer of The Ultima Codex

Daemon

  • Paul Lester – Vanzilar Dragon

Drakes

  • Adam Westlake
  • Alec Nunn
  • Claus Kick
  • Cody Baxter
  • Devon Scott-Tunkin
  • Erwin Wolf
  • Frank Wolter – Sir Cabirus Dragon
  • Joseph Drasin – Unseen Dragon – Organizer of the Festival of the Silver Serpent
  • John Hosie – Houston Dragon
  • Madjack McMad
  • Neil Graham
  • Olivier Guinart
  • Paul Leone
  • Sir John- Serendipitous Dragon – German Ultima Games Translator

Cyclops

  • Browncoat Jayson
  • Helgraf Dragon
  • Jason Spangler
  • Jonathan
  • Markus Moenig

Gargoyles

  • Christopher S Wilson
  • dgray038
  • Edgar Garcia Hernandez – Dungeon Master
  • Gallara Dragon – Leader of the Ultima Dragons Internet Chapter
  • J. G.
  • Jason Brock
  • Matt Kimmich
  • Nathan Jerpe – Developer of Legerdemain
  • Nick Walton
  • Noncho Savov
  • Roberto A Rivera
  • Ryan Szrama – Developer of Drupal Commerce
  • An anonymous Gargoyle

Headless

 

Sprint 1 starts next week! I’ll post an update of the project plans before that.

OpenArthurianX6 – Funded!

Big thanks to all contributors, the project has been funded…. Yay! 😀

Screen Shot 2017-07-25 at 9.08.50 PM

I’ve confirmed with Jucarave (a.k.a. Exodus Destiny Dragon), and we’ll get to work on this as soon as the campaign is over.

Now that we have reached the base goal, it would be awesome if we manage to hit the stretch goals, here’s an excerpt from the campaign:

Base Goal ($2.000)

We will deliver a free, open source game engine which you can readily use for your project including a content pack (Medieval Fantasy). This version of the engine would not include any tools to manage your game data (characters, monsters, object definitions), everything would be done at code level using data files and Tiled.

Stretch Goals

  • $3.000 – Game editor including Objects and Monsters managers
  • $4.000 – Full game editor including Character and Magic System managers.
  • Beyond – each 500$ will be used to create a new themed content pack (Space, Modern, Futuristic, Western, Steampunk, etc.)

So, if you like this kind of games and would love to see more of them being created, or if you feel you’ll like to develop one yourself, spread the word and contribute if you haven’t 🙂

Really excited to work on this and I’m glad it’s already going to be out there for gamedev enthusiasts to toy around with 😀

Javascript motion picture experiment, part 2

I wasn’t very happy with the result for my first take on the motion picture so I decided to revisit them. I did the following:

  • Remove the precision timing requirements by just calculating the film speed, position it correctly and have the shutter be triggered when the frame is passing through it.
  • Fix the shutter so that it’s not open/closed 50% of the time, instead it opens for 10 milliseconds and closes back, regardless of the desired frame rate.

 

Much better! if frame rate is high enough this looks pretty fluid, but may be too dark! (Note that the 1FPS example is skipping some frames, that’s an artifact of the animated GIF)

To compensate for the short shutter speed I added a white mask to simulate stronger lighting, then I increase the contrast of the film to make it look sharper under the increased lighting.

This also added a natural vignette effect to the movie. The final change I did was simulating a bit of imprecision on the shutter, making it randomly open a bit too late for some frames.

It actually looks much better when running directly (and at higher frame rates), things are happening just too quickly for the GIFs to get all important frames. I’ll clean up and push it to github soon for the curious, for the moment you can check it out online HERE.

I think I achieved what I was aiming for first, however for a real application it may be too tiring for the eyes… may be a hybrid approach (faking part of the visual effects) would be more appealing.