{"id":15357681,"url":"https://github.com/nauja/ue4-pixelperfect2d-sample","last_synced_at":"2025-04-15T07:11:29.675Z","repository":{"id":139653003,"uuid":"268741653","full_name":"Nauja/ue4-pixelperfect2d-sample","owner":"Nauja","description":"Sample of coding a pixel perfect 2D game in Unreal Engine 5 with Paper2D","archived":false,"fork":false,"pushed_at":"2023-11-14T18:20:24.000Z","size":12063,"stargazers_count":72,"open_issues_count":0,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-15T07:11:28.737Z","etag":null,"topics":["paper2d","pixel-art","pixelperfect","sample","ue4","ue5"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nauja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-06-02T08:16:43.000Z","updated_at":"2025-03-30T04:59:08.000Z","dependencies_parsed_at":"2023-11-14T19:29:52.010Z","dependency_job_id":null,"html_url":"https://github.com/Nauja/ue4-pixelperfect2d-sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nauja%2Fue4-pixelperfect2d-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nauja%2Fue4-pixelperfect2d-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nauja%2Fue4-pixelperfect2d-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nauja%2Fue4-pixelperfect2d-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nauja","download_url":"https://codeload.github.com/Nauja/ue4-pixelperfect2d-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249023729,"owners_count":21199960,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["paper2d","pixel-art","pixelperfect","sample","ue4","ue5"],"created_at":"2024-10-01T12:37:57.899Z","updated_at":"2025-04-15T07:11:29.653Z","avatar_url":"https://github.com/Nauja.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ue4-pixelperfect2d-sample\n\n![UE5](https://img.shields.io/badge/UE5-5.2+-blue)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Nauja/ue4-pixelperfect2d-sample/master/LICENSE)\n\nSample of coding a pixel perfect 2D game in Unreal Engine 5 with Paper2D.\n\n![Preview](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media4.25/preview.gif)\n\nThe sole purpose of this sample is to compile all the config required, and common\npitfalls to avoid, to correctly render pixel perfect sprites with Paper2D.\n\nFor an Unreal Engine 4 version, check the branch [ue4.25](https://github.com/Nauja/ue4-pixelperfect2d-sample/tree/ue4.25).\n\nGo further:\n\n  * [Climb System 2D Sample](https://github.com/Nauja/ue4-climb2d-sample)\n  * [Interactable Chest 2D Sample](https://github.com/Nauja/ue4-chest2d-sample)\n\n## Table of contents:\n\n- [Importing textures](#importing-textures)\n- [Scaling up sprites](#scaling-up-sprites)\n- [True sprite colors](#true-sprite-colors)\n- [Pixelated font](#pixelated-font)\n- [Snap pixels to grid](#snap-pixels-to-grid)\n- [Orthographic camera](#orthographic-camera)\n\n## Importing textures\n\nWhen importing new textures, check that the **Texture Group** option is correctly set to\n**2D Pixels (unfiltered)**, and that the **Compression Settings** is set to **UserInterface2D (RGBA)**. This will prevent the textures from being antialiased:\n\n![TextureGroup](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-texturegroup.png)\n\nAlso, expand the **Advanced** section, and set the **Filter** option to **Nearest**:\n\n![SpriteNearest](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-sprite-nearest.png)\n\n## Scaling up sprites\n\nHere is the charset used for Mario:\n\n![Mario](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/master/Content/Textures/T_Mario.png)\n\nAs you can see, the size of one frame is really small (16x32 pixels). If it were displayed as is\nin UE5, then all your physics would have to be configured with unrealistic values and placing or moving\nActors in the editor would become complicated due to their small size.\n\nIn order to keep consistent units between the physics and the rendering, all sprites are configured with a **pixels per unit** value of **0.5**, which effectively make them scaled by two:\n\n![PixelsPerUnit](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-pixelsperunit.png)\n\nThis is how the level looks up in editor with this configuration. You can see it is neither too small nor too big:\n\n![LevelEditor](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-preview.png)\n\n## True sprite colors\n\nOne common problem is that rendered colors are altered by UE5's post processing effects.\nBy default, many post processing effects are enabled and are causing sprites\nnot to render correctly. In this sample, all post processing effects are disabled\nby setting **EngineShowFlags.PostProcessing** to **0** with a custom **UGameViewportClient**\nclass:\n\n```cpp\nvoid USampleGameViewportClient::Activated(FViewport* InViewport, const FWindowActivateEvent\u0026 InActivateEvent)\n{\n    Super::Activated(InViewport, InActivateEvent);\n    \n    // Disable post processing effects when the viewport is activated\n    EngineShowFlags.PostProcessing = 0;\n}\n```\n\nThe custom **UGameViewportClient** class can be configured in **Project Settings \u003e Engine \u003e General Settings**:\n\n![GameViewportClient](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-gameviewportclient.png)\n\nAnother possibility is to execute the following console command, however it turns out that it doesn't\nwork in shipping builds where console commands are disabled:\n\n```cpp\nAPlayerController* Controller = UGameplayStatics::GetPlayerController(GetWorld(), 0);\ncheck(Controller);\nController-\u003eConsoleCommand(TEXT(\"showflag.postprocessing 0\"));\n```\n\nAlso, in **Project Settings \u003e Engine \u003e Rendering**, make sure to uncheck the **Mobile HDR** option and all post processing options such as **Bloom**, **Auto Exposure**, **Anti-Aliasing**, etc.\n\n## Pixelated font\n\nImporting a custom font to use in a TextRendererComponent seems complicated. This requires\nthe **Font Cache Type** parameter of your font to be set to **Offline**. Next, make\nsure to uncheck the **Use Distance Field Alpha** option to prevent the font from becoming blurry:\n\n![UseDistanceField](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-usedistancefield.png)\n\nAlso make sure to uncheck **Enable Antialiasing** to prevent any antialiasing:\n\n![Nearest](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-nearest.png)\n\nThe last step is to create a new material to render the font. This can be done by copying the default material\nused by any TextRendererComponent and modifying it:\n\n![Nearest](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-fontmaterial.png)\n\n## Snap pixels to grid\n\nIn retro games, all sprites were snapped to a pixel grid, ensuring each pixel fitted in the grid and was correctly rendered.\nIn modern games, your Actors may be at positions containing float values, causing pixels to fall off the grid and render\nincorrectly. Here is an example of moving the same sprite without pixel snapping (left) and with pixel snapping (right):\n\n![PixelSnap](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media4.25/editor-pixelsnap.gif)\n\nTo do that, you can copy the default material used for sprites and modify it to offset vertex positions to make\nsure they fall correctly on the grid:\n\n![PixelSnapMaterial](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-pixelsnapmaterial.png)\n\nYou can do the same for the font material, but by replacing the **PixelsPerUnit** parameter by **1**.\n\n## Orthographic camera\n\nThis sample uses a static orthographic camera positioned at the center of the screen. The expected resolution of our viewport is\n**512x448** pixels, the double of the SNES screen resolution, that's why the **OrthoWidth** parameter must be set to **512** pixels and\nthe **Aspect Ratio** parameter to **8/7**:\n\n![Camera](https://github.com/Nauja/ue4-pixelperfect2d-sample/raw/media5.2/editor-camera.png)\n\n## Revisions\n\n### 2023/11/14:\n\n* Added a step to set the **Filter** option to **Nearest** on sprites. Without that, the game build was all blurry despite\n  the game being crisp in PIE.\n* Replaced **ConsoleCommand** by creating a custom **UGameViewportClient** class to disable the flag as console commands\n  are disabled in shipping builds.\n\n## Credits\n\nSprites are coming from [The Spriters Resource](https://www.spriters-resource.com/).\n\nFont from [FontSpace](https://www.fontspace.com/atlantis-international-font-f31357).\n\nPixel snap trick [Ludicrous Games](https://weareludicrous.com/blog/2018/3-tricks-to-improve-pixel-art-rendering-in-ue4/)\n\n## License\n\nLicensed under the [MIT](LICENSE) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnauja%2Fue4-pixelperfect2d-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnauja%2Fue4-pixelperfect2d-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnauja%2Fue4-pixelperfect2d-sample/lists"}