Tutorials - Achievement Icons

This quick tutorial will cover to how get achievement icons from Steam's servers. It was made because there are some extra steps folks need to use to render the images and it may not be very clear otherwise.

Getting The Handle And Buffer

First you will need to request the icon handle by using the achievement's name you set in the Steamworks back-end:


var HANDLE: int = Steam.getAchievementIcon("achievement name")

This handle is used to get the image information. This would be passed to a buffer variable like so:


var BUFFER: Dictionary = Steam.getImageRGBA(HANDLE)

Creating The Image

This buffer contains the actual image data for our icon but is rather tricky to use. However, before that we will need to create a new image and texture to attach to a sprite later on:


var SIZE: int = 32
var ICON: Image = Image.new()
var ICON_TEXTURE: ImageTexture = ImageTexture.new()
ICON.create(SIZE, SIZE, false, Image.FORMAT_RGBAF)

The size variable can be whatever you want; for our example we will use 32 (32 pixels by 32 pixels).

Now let's go back and parse that buffer data:


ICON.lock()
for y in range(0, SIZE):
	for x in range(0, SIZE):
		var pixel: int = 4 * (x + y * SIZE)
		var r: float = float(BUFFER['buffer'][pixel]) / 255
		var g: float = float(BUFFER['buffer'][pixel+1]) / 255
		var b: float = float(BUFFER['buffer'][pixel+2]) / 255
		var a: float = float(BUFFER['buffer'][pixel+3]) / 255
		ICON.set_pixel(x, y, Color(r, g, b, a))
ICON.unlock()

Now that all the pixels are set in the right places, we can create the texture:

	
ICON_TEXTURE.create_from_image(ICON)

Finally we can display the icon. Using the previous ICON_TEXTURE, we can place this icon on our waiting sprite:


get_node("Sprite").set_texture(ICON_TEXTURE)

All-In-One

Our complete example should look something like this:


# Set up some icon variables
var SIZE: int = 32

# Get the image's handle
var HANDLE: int = Steam.getAchievementIcon("ACH_WIN_ONE_GAME")

# Get the image data
var BUFFER: Dictionary = Steam.getImageRGBA(HANDLE)

#Create the image and texture for loading
var ICON: Image = Image.new()
var ICON_TEXTURE: ImageTexture = ImageTexture.new()
ICON.create(SIZE, SIZE, false, Image.FORMAT_RGBAF)

# Lock and draw the image
ICON.lock()
for y in range(0, SIZE):
	for x in range(0, SIZE):
		var pixel: int = 4 * (x + y * SIZE)
		var r: float = float(BUFFER['buffer'][pixel]) / 255
		var g: float = float(BUFFER['buffer'][pixel+1]) / 255
		var b: float = float(BUFFER['buffer'][pixel+2]) / 255
		var a: float = float(BUFFER['buffer'][pixel+3]) / 255
		ICON.set_pixel(x, y, Color(r, g, b, a))
ICON.unlock()

# Apply it to the texture
ICON_TEXTURE.create_from_image(ICON)

# Display it on a sprite node
get_node("Sprite").set_texture(ICON_TEXTURE)

And that's how you display an achievement icon. You can find this tutorial in the Example branch of the repo if you want to see it in action.