User Tools

Site Tools


en:tutorials:shaders:hexagongrid2

Hexagon Grid Tutorial (Axial/Cubial Coordinates)

Introduction

This tutorial showcases how to draw a hexagon grid using a shader, as well as using the mouse position to highlight specific hexagon tiles.



It is based off of the this Hexagon Grid Tutorial, the key difference being that this example makes use of an axial/cubial coordinate system for pixel-to-hex calculations, as opposed to the grid-based system used by the old tutorial.

Details

The axial/cubial coordinate system and associated mathematics used in this example are derived from the theory presented in this blog post: https://www.redblobgames.com/grids/hexagons/

Source Code

A complete version of this tutorial's source code can be found at the following git repository: https://github.com/LudiG/tut_hex

This repository also contains hexagon resource files that can be used as textures for your hexagon shader.

NOTE: Pointy-top and flat-top hexagons use different texture files, so you will need to ensure that you match the right files with your hexagon layout.

INI File (tut_hex.ini)

ORX Config File

[Display]
ScreenWidth   = 800
ScreenHeight  = 600
Title         = Hexagon Grid Tutorial
 
[Input]
SetList = MainInput
 
[MainInput
                                    
en/tutorials/shaders/hexagongrid2.txt · Last modified: 2025/09/30 17:26 (9 months ago) by 127.0.0.1