New Demo Video Series: Hex Tile Game Board with Procedurally Generated Islands

Hey Everyone,

I’ve been quietly toiling away at this one for a few months now. Inspired by the Seafarer’s expansion of Settler’s of Catan, I wanted to bring together many of the things that I love into this one single larger demo…Games, Procedural Noise, Shaders, Math, oh…and PIRATES!

My goal for this series was to create a bigger demo that shows off many elements of Babylon.js and takes viewers on a step by step journey to create it. It’s my sincere hope that this is helpful to those new to Babylon, and that there’s something new to learn for some of our more seasoned experts as well.

Here’s the demo that we’ll go through the process of creating together through this series:
https://playground.babylonjs.com/#XEP0ZD#6

To kick it all off, here’s the first video in the series:

The starting playground for this video:
https://playground.babylonjs.com/#XEP0ZD

and here are some helpful resources that are mentioned in this video:

Documentation about Asset Containers in Babylon.js:
https://doc.babylonjs.com/how_to/how_to_use_assetcontainer
https://doc.babylonjs.com/how_to/load_from_any_file_type#sceneloaderloadassetcontainer

Pirate Fort Video Series (for understanding Animation Groups):

Thanks to all!
-PirateJC

24 Likes

Hey Everyone…Part 2 is here! Hope you’re enjoying this series so far!

The final demo that we’re building together:
https://playground.babylonjs.com/#XEP0ZD#6

The starting playground for this video:
https://playground.babylonjs.com/#XEP0ZD#1

5 Likes

Hey Everyone! Part 3 is up! In this video we dive into the math behind hex tiles and actually create the hex grid together! Hope you enjoy!!!

The final demo that we’re building together:
https://playground.babylonjs.com/#XEP0ZD#6

The starting playground for this video:
https://playground.babylonjs.com/#XEP0ZD#2

Amazing explanation of Hex Tile math from Red Blob Games:

6 Likes

I’m working on a hex game myself. Here’s Honeycomb, a cool hex library based on the Red Blob Games blog:

1 Like

Very cool!!!

Oh man JC, you are making me wanna go back and start work again on my hex editor:

3 Likes

Only 1 question…WHEN CAN WE PLAY IT?!!

It looks awesome! I adore the concept art!

1 Like

I should toss the editor up here at some point just so people have access to it for reference, jsut been so busy with work I dont get a chance to do things for myself anymore :sob:

3 Likes

This is some seriously high quality content! Really appreciate it, thank you!

2 Likes

Incredibly kind of you to say! Thank you very much @jhadenfeldt!

Part 4 is here! In this one, we dive into the node material editor and use the awesome simplex noise node from @Pryme8 to create a cool shimmery effect for the top surface of our hex tiles!

The final demo that we’re building together:
https://playground.babylonjs.com/#XEP0ZD#6

The starting playground for this video:
https://playground.babylonjs.com/#XEP0ZD#3

3 Likes

Kicking off a new week with part 5 of this series! In this one, we’ll finish out the top surface of our hex tiles by learning to apply masks in the Node Material Editor to add a shimmery ‘?’ to the top of each tile.

As always, I hope this video is helpful and informative in some way.

You all rock!

The final demo that we’re building together:
https://playground.babylonjs.com/#XEP0ZD#6

The starting playground for this video:
https://playground.babylonjs.com/#XEP0ZD#4

4 Likes

Hey Everyone! Part 5 of this video series is here! In this video, we’ll walk through the process of taking procedurally generated noise, making a texture out of it, passing that texture into a node material, and then inverting, rotating it, tweaking it, masking it, and spit out some procedural islands out the other side!!!

The final demo that we’re building together:
https://playground.babylonjs.com/#XEP0ZD#6

The starting playground for this video:
https://playground.babylonjs.com/#XEP0ZD#5

Patrick’s video on Polar Coordinates:

Procedural terrain cubes:

Article about the Diamond-Square Algorithm:

1 Like

Well everyone, it’s time to bring this ship to shore. Here is the 7th and final video in this series. In this video I go over adding some basic GUI elements to refresh your scene and drive the hex tile grid. Thank you for coming along with me on another piratical adventure. I sincerely hope this has helped a few of you learn something new about Babylon.js!

You all rock!

Cheers,
-PirateJC

The final demo that we’re building together:
https://playground.babylonjs.com/#XEP0ZD#6

3 Likes

arrrg, Pirates of the Pro-sea-dural

1 Like

LOL

image