Paper Goomba

Alright, alright. I know this isn’t rendering text to the grid. I know this isn’t “according to plan”! But… We need to walk with sprites in a 3d world before we can run with beautiful ASCII art in a 3d world. It turns out that Bevy does not make it easy to render text or sprites using a 3d camera. So we’ll need to get that working, and we’ll add a little extra embellishment as well.

Camera Frame Smoothing

In the last article we built a camera that can move around our grid, rotate, and zoom in and out. The camera works pretty well, but we need to make sure its movement isn’t tied to the frame rate. While we’re improving this code, we should also place bounds on the camera to keep it attached to the grid. Smoothing Zoom Let’s start by smoothing the zoom function. In order to do this, we need to change our zoom_level parameter to be a f32 instead of a usize.


In the last article we were able to render rather large grids. In most games with large grids, you can zoom in and out of the grid, rotate the camera, and move the camera around. At this point, we should be able to render a grid that looks like the one below. If you don’t see this on your screen, then download the code for the previous post and start from there.

Grid Box

We left off last article rendering a plane with a nice grid on it. It should look something like this. Grid Box This is starting to look pretty good. Our shader antialises the lines very smoothly over our UV coordinates and we are able to easily draw grids. Let’s make it even nicer though, let’s render a box instead of a plane! In order to do this, we need to write some code to build a mesh for a box with the proper UV coordinates.

Graph Paper Shader

Now that we have an application shell and we are rendering a basic scene, let’s get down to rendering our sheet of graph paper! There are several approaches we can take to rendering a grid onto a mesh. One of the most simple would be to create a texture in an image editor and skin it onto our mesh. Tried and true, this method would work great! But… I have no interest in opening an image editor to create a grid texture.

Bevy Application Bootstrap

Let’s get started with a new application where we will implement out Text Gem game framework. You should be somewhat familiar with developing Rust if you want to follow along. If you don’t know Rust well, this could be a good way to start learning! Prerequisites You need to install Rust using rustup. Once you have Rust installed, we’ll create a new project to start coding. Terminal 1 2 3 4 5 6 7 8 # Create a new Rust project cargo new textgem # Go into the newly-created project folder cd textgem # Run the Hello, World!

Text Gem: Introduction

For a while now I’ve been interested in graphics programming. Rendering 3d objects to build worlds has always been fascinating to me, though I’ve never had time to properly learn how graphics programming works. I’ve also been interested in learning how to design and build games! In order to build games, we need to represent the world that a player is moving through. Using ASCII characters and grids is a very simple way to represent a world, and the simplicity allows for quickly trying different mechanics.

Professional Biography

My mom showed me my first lines of Basic when I was 5 years old and I have been fascinated with software ever since. It was a simple for loop that used *’s to output half a Christmas tree. It looked something like this. 1 2 3 4 5 6 7 8 9 10 * ** *** **** ***** ****** ******* ******** ********* ********** I started writing my own code when I turned 11 by putting together simple HTML pages to showcase my favorite cartoons and video games.