GodotSteam Tutorials - Achievement Icons

Description

"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.\r\n\r\n??? guide Relevant GodotSteam classes and functions\r\n* [User Stats class](https:\/\/godotsteam.com\/classes\/user_stats)\r\n\t* [getAchievementIcon()](https:\/\/godotsteam.com\/classes\/user_stats#getachievementicon)\r\n\t* [requestCurrentStats()](https:\/\/godotsteam.com\/classes\/user_stats#requestcurrentstats)\r\n* [Utils class](https:\/\/godotsteam.com\/classes\/utils)\r\n\t* [getImageRGBA()](https:\/\/godotsteam.com\/classes\/utils#getimagergba)\r\n\t* [getImageSize()](https:\/\/godotsteam.com\/classes\/utils#getimagesize)\r\n???\r\n\r\n## Prerequisites{.block}\r\n\r\nBefore you can get achievement icons you first need to have retrieved the user's stats from Steam. This is done by default when initializing Steam, but can optionally be disabled. This tutorial assumes that you have already received the user stats.  Starting in **SDK 1.61 (GodotSteam 3.27 \/ 4.12)**, this is now done automatically by the Steam client so you should be good to go.\r\n\r\n## Getting the Handle and Buffer{.block}\r\n\r\nFirst you will need to request the icon handle by using the achievement's API name you set in the Steamworks back-end:\r\n\r\n```\r\nvar icon_handle: int = Steam.getAchievementIcon(\"ACHIEVEMENT_NAME\")\r\n```\r\n\r\nThis handle is an ID used to get information about the image's size and a byte array (buffer) of the pixel data:\r\n\r\n```\r\nvar icon_size: Dictionary = Steam.getImageSize(icon_handle)\r\nvar icon_buffer: Dictionary = Steam.getImageRGBA(icon_handle)\r\n```\r\n\r\nNote that the **getImageRGBA()** function can be somewhat expensive so it is recommended to only call this once per image handle and cache the result if you will need to access the image data multiple times.\r\n\r\n## Creating the Image{.block}\r\n\r\nThis buffer is a dictionary that contains two keys: **success** and **buffer** which contains the actual image data for our icon. However, as it is simply binary data, we need to load it into an Image so that Godot can use it as a Texture. The format of the data in the buffer is RGBA8 when we receive it from Steam, so we need to tell Godot how to make sense of it by specifying it as such:\r\n\r\n::: tabs\r\n@tab:active Godot 2.x, 3.x\r\n```gdscript\r\nvar icon_image: Image = Image.new()\r\nicon_image.create_from_data(icon_size.width, icon_size.height, false, Image.FORMAT_RGBA8, icon_buffer[\"buffer\"])\r\n```\r\n\r\n@tab Godot 4.x\r\n```gdscript\r\nvar icon_image: Image = Image.create_from_data(icon_size.width, icon_size.height, false, Image.FORMAT_RGBA8, icon_buffer[\"buffer\"])\r\n```\r\n:::\r\n\r\nThe size of the image is determined by the images you uploaded when configuring achievements on the Steamworks back-end. Valve recommends larger (256x256) images. If you want to display the image at a different size, say 64x64, you can optionally resize it now. Check the [Godot documentation](https:\/\/docs.godotengine.org\/en\/stable\/classes\/class_image.html#class-image-method-resize) on **Image.resize()** for which interpolation mode best suits your needs.\r\n\r\n```gdscript\r\nicon_image.resize(64, 64, Image.INTERPOLATE_LANCZOS)\r\n```\r\n\r\nNow that all the pixels are set in the right places, we can create the actual texture which will be displayed:\r\n\r\n::: tabs\r\n@tab:active Godot 2.x, 3.x\r\n```gdscript\r\nvar icon_texture: ImageTexture = ImageTexture.new()\r\nicon_texture.create_from_image(icon_image)\r\n```\r\n\r\n@tab Godot 4.x\r\n```gdscript\r\nvar icon_texture: ImageTexture = ImageTexture.create_from_image(icon_image)\r\n```\r\n:::\r\n\r\nFinally we can display the icon. Using the previous **icon_texture**, we can place this icon on our waiting Sprite or TextureRect, etc.\r\n\r\n```gdscript\r\n$Sprite.texture = icon_texture\r\n```\r\n\r\n## All-In-One{.block}\r\n\r\nOur complete example should look something like this:\r\n\r\n::: tabs\r\n@tab:active Godot 2.x, 3.x\r\n```gdscript\r\n# Get the image's handle\r\nvar icon_handle: int = Steam.getAchievementIcon(\"ACH_WIN_ONE_GAME\")\r\n\r\n# Get the image data\r\nvar icon_size: Dictionary = Steam.getImageSize(icon_handle)\r\nvar icon_buffer: Dictionary = Steam.getImageRGBA(icon_handle)\r\n\r\n# Create the image for loading\r\nvar icon_image: Image = Image.new()\r\nicon_image.create_from_data(icon_size.width, icon_size.height, false, Image.FORMAT_RGBA8, icon_buffer[\"buffer\"])\r\n\r\n# Create a texture from the image\r\nvar icon_texture: ImageTexture = ImageTexture.new()\r\nicon_texture.create_from_image(icon_image)\r\n\r\n# Display the texture on a sprite node\r\n$Sprite.texture = icon_texture\r\n```\r\n\r\n@tab Godot 4.x\r\n```gdscript\r\n# Get the image's handle\r\nvar icon_handle: int = Steam.getAchievementIcon(\"ACH_WIN_ONE_GAME\")\r\n\r\n# Get the image data\r\nvar icon_size: Dictionary = Steam.getImageSize(icon_handle)\r\nvar icon_buffer: Dictionary = Steam.getImageRGBA(icon_handle)\r\n\r\n# Create the image for loading\r\nvar icon_image: Image = Image.create_from_data(icon_size.width, icon_size.height, false, Image.FORMAT_RGBA8, icon_buffer[\"buffer\"])\r\n\r\n# Create a texture from the image\r\nvar icon_texture: ImageTexture = ImageTexture.create_from_image(icon_image)\r\n\t\r\n# Display the texture on a sprite node\r\n$Sprite.texture = icon_texture\r\n```\r\n\r\nAnd that's how you display an achievement icon.\r\n\r\n## Additional Resources{ .block }\r\n\r\n### Video Tutorials\r\n\r\nPrefer video tutorials? Feast your eyes and ears!\r\n\r\n[ youtube: GodotSteam - How It Works - Achievement Icons](https:\/\/makertube.net\/w\/hDCtLQovk5RyB7eujb93RV){ data-author=\"Gramps \/ GodotSteam\" }\r\n"

Description

Comments

Table of contents

Compatibility

Tags