{"id":14967231,"url":"https://github.com/saranomy/tinydrawer","last_synced_at":"2025-07-17T02:36:03.610Z","repository":{"id":254513093,"uuid":"846768696","full_name":"Saranomy/TinyDrawer","owner":"Saranomy","description":"TinyDrawer is a collection of drawing methods for Rasberry Pi Pico devices","archived":false,"fork":false,"pushed_at":"2024-09-01T23:14:43.000Z","size":6658,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-10T22:21:56.255Z","etag":null,"topics":["drawing-app","game-engine","micropython","pico","raspberry-pi","raspberry-pi-pico","raspberry-pi-pico-micropython"],"latest_commit_sha":null,"homepage":"","language":"Python","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/Saranomy.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-23T23:16:12.000Z","updated_at":"2024-09-01T23:14:45.000Z","dependencies_parsed_at":"2024-08-24T00:32:03.533Z","dependency_job_id":"1fcef4c7-0145-4d76-b33f-0e7870accbb4","html_url":"https://github.com/Saranomy/TinyDrawer","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.28125,"last_synced_commit":"c4e2b9837a2f4e29dbb0f3406e1eed3336b1bb2a"},"previous_names":["saranomy/tinydrawer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saranomy%2FTinyDrawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saranomy%2FTinyDrawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saranomy%2FTinyDrawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saranomy%2FTinyDrawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Saranomy","download_url":"https://codeload.github.com/Saranomy/TinyDrawer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219865216,"owners_count":16555929,"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":["drawing-app","game-engine","micropython","pico","raspberry-pi","raspberry-pi-pico","raspberry-pi-pico-micropython"],"created_at":"2024-09-24T13:37:40.569Z","updated_at":"2024-10-10T22:22:11.895Z","avatar_url":"https://github.com/Saranomy.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TinyDrawer\n\nInstall [TinyDrawer](https://pypi.org/project/tinydrawer) package on [Thonny](https://thonny.org)\n\n- [Features](#features)\n- [Get Started](#get_started)\n- [Limitations](#limitations)\n- [License](#license)\n\n## 2D Games for Pi Pico\nA collection of drawing methods inspired by [PICO-8 game engine](https://www.lexaloffle.com/pico-8.php) built for [Raspberry Pi Pico devices](https://www.raspberrypi.com/products/raspberry-pi-pico) written in [MicroPython](https://micropython.org). These methods handle drawing on the high-level while pushing pixels to the RGB565 [framebuf.FrameBuffer](https://docs.micropython.org/en/latest/library/framebuf.html).\n\n| [Waveshare's Pico LCD 1.14](https://www.waveshare.com/wiki/Pico-LCD-1.14) | [ZhongJungYuan's 1.69 TFT LCD](https://www.aliexpress.com/i/1005004721706705.html) |\n| - | - |\n| ![waveshare screen](./images/waveshare_pico_lcd_1_14.gif) | ![zhongjungyuan screen](./images/zjy169s0800tg01.gif) |\n\n\u003ca name=\"features\"\u003e\u003c/a\u003e\n\n## Features\n\n#### Sprite Buffer\nJust like PICO-8, TinyDrawer comes with the sprite buffer that can store 32 sprites (8 columns and 4 rows, and each sprite is 8x8 pixels) by default. Design your sprites using [TinyDrawer Sprite Buffer Editor](https://html-preview.github.io/?url=https://github.com/saranomy/tinydrawer/blob/master/editor.html)\n\n![alt text](./images/editor.png)\n\nAt the bottom, copy the Hex String, and initialize the TinyDrawer to load this sprite buffer to your program.\n\n#### TinyDrawer\n\nCall `TinyDrawer(hex_string, buffer_w, buffer_h, display_w, display_h, zoom)` to create the TinyDrawer object\n\n```python\nimport tinydrawer\n\n# Initialize TinyDrawer with the hex string from the Editor\ntd = TinyDrawer(\"000877004fff94ff...\") # \u003c- arg: your hex string\n```\n\nYou can change the zoom level and display's width and height\n\n```python\ntd = TinyDrawer(\"000877004fff94ff...\", display_w = 240, display_h = 135, zoom = 5)\n```\n\nYou can later change the sprite buffer size by calling `set_buffer_hex(hex_string, buffer_w, buffer_h)`.\n\n```python\n# change buffer size to 12 x 2\ntd.set_buffer_hex(\"000877004fff94ff...\", buffer_w = 12, buffer_h = 2)\n```\n\n#### Sprite Index\n\nThe sprite index `n` indicates which sprite from the Sprite Buffer should be drawn. The top-left sprite has an index of `n = 0`, while the first sprite in the second row has an index of `n = 8`.\n\n![sprite position](./images/sprites.png)\n\n#### Draw Sprite\n\nUse `spr(fb, n, x, y)` to draw a sprite at index `n` to the framebuf.FrameBuffer `fb` at `x`, `y` position.\n\n```python\n# spr(fb, n, x, y, w = 1, h = 1, flip_x = False, flip_y = False)\n\n# draw a 8x8 sprite 0 at (20, 10)\ntd.spr(fb, 0, 20, 10)\n\n# draw a 16x16 sprite 1 at (120, 30)\ntd.spr(fb, 1, 120, 30, w = 2, h = 2)\n\n# draw a 8x8 sprite 8 but flipping the sprite horizontally\ntd.spr(fb, 8, 0, 0, flip_x = True)\n```\n\n#### Color\nTinyDrawer comes with 16 colors:\n\n| Index | Name | Hex |\n| - | - | - |\n| 0 | Black | ![#000000](https://via.placeholder.com/15/000000/000000?text=+) `#000000` |\n| 1 | Dark Blue | ![#242449](https://via.placeholder.com/15/242449/000000?text=+) `#242449` |\n| 2 | Dark Purple | ![#6D2449](https://via.placeholder.com/15/6D2449/000000?text=+) `#6D2449` |\n| 3 | Dark Green | ![#009249](https://via.placeholder.com/15/009249/000000?text=+) `#009249` |\n| 4 | Brown | ![#B64924](https://via.placeholder.com/15/B64924/000000?text=+) `#B64924` |\n| 5 | Dark Grey | ![#6D6D49](https://via.placeholder.com/15/6D6D49/000000?text=+) `#6D6D49` |\n| 6 | Light Grey | ![#B6B6B6](https://via.placeholder.com/15/B6B6B6/000000?text=+) `#B6B6B6` |\n| 7 | White | ![#FFFFFF](https://via.placeholder.com/15/FFFFFF/000000?text=+) `#FFFFFF` |\n| 8 | Red | ![#FF0048](https://via.placeholder.com/15/FF0048/000000?text=+) `#FF0048` |\n| 9 | Orange | ![#FF9200](https://via.placeholder.com/15/FF9200/000000?text=+) `#FF9200` |\n| 10 | Yellow | ![#FFDB24](https://via.placeholder.com/15/FFDB24/000000?text=+) `#FFDB24` |\n| 11 | Green | ![#00FF24](https://via.placeholder.com/15/00FF24/000000?text=+) `#00FF24` |\n| 12 | Blue | ![#24B6FF](https://via.placeholder.com/15/24B6FF/000000?text=+) `#24B6FF` |\n| 13 | Lavender | ![#926d92](https://via.placeholder.com/15/926d92/000000?text=+) `#926d92` |\n| 14 | Pink | ![#6D2449](https://via.placeholder.com/15/6D2449/000000?text=+) `#FF4992` |\n| 15 | Light Peach | ![#ffDBB6](https://via.placeholder.com/15/ffDBB6/000000?text=+) `#FFDBB6` |\n\nTo use a color on the framebuf, call `color(index)` to get the int number in RGB565 color format.\n\n```python\n# fill the entire display with black color\nfbuff.fill(td.color(0))\n\n# draw an orange rectangle\nfbuff.fill_rect(0, 0, 240, 100, td.color(9))\n```\n\n#### Replace Color\n\nBy default, the black color `0` on the Sprite Buffer is considered as a transparent color when drawing. Use `pal(c0, c1)` to swap colors before drawing.\n\nFor example, to draw the black color pixels on the framebuf:\n1. On the [Editor](https://html-preview.github.io/?url=https://github.com/saranomy/tinydrawer/blob/master/editor.html), replace black color with white color `0` or any other color\n2. Optional: Call `pal()` to reset the palette\n3. Call `pal(7, 0)` to replace white `7` with black `0` when drawing\n4. Call `str(fb, n, x, y)` to draw\n5. Optional: Call `pal()` to clear the color replacement\n\nAnother example, we can turn Mario into Luigi by swapping colors at sprite index `0`\n\n```python\n# replace any red with green\ntd.pal(8, 11) \n\n# draw mario sprite\ntd.spr(fb, 0, 100, 100)\n\n# reset the color replacement\ntd.pal()\n```\n\n\u003ca name=\"get_started\"\u003e\u003c/a\u003e\n\n## Get Started\n\n#### Hardware Requirement\nIn this demo, we will use [Pi Pico W](https://www.pishop.ca/product/raspberry-pi-pico-w/) and [Waveshare's Pico LCD 1.14](https://www.pishop.ca/product/1-14inch-lcd-display-module-for-raspberry-pi-pico-65k-colors-240-135-spi/) which has joystick controller and buttons. We will run *example_mario.py* on the Pico. You can use any device and any display screen as long as they meet the following requirements\n- Have a [Raspberry Pi Pico device](https://www.raspberrypi.com/products/raspberry-pi-pico) or Pico compatible device\n- Have a SPI [ST7789](https://newhavendisplay.com/content/datasheets/ST7789V.pdf) display connected to Pi Pico\n- Make sure the display color format is set to RGB565\n- Have a code that can send [framebuf.FrameBuffer](https://docs.micropython.org/en/latest/library/framebuf.html) to the display\n\n\n#### Install\n\n1. Complete the Get Started guide with the [Pi Pico](https://projects.raspberrypi.org/en/projects/getting-started-with-the-pico)\n2. Open [Thonny](https://thonny.org), and connect to the Pi Pico\n\n![thonny](./images/thonny.png)\n\n3. Go to Tools -\u003e Manage Packages. Then search for [tinydrawer](https://pypi.org/project/tinydrawer/) and install it to the Pi Pico\n\n![search tinydrawer](./images/tinydrawer.png)\n\n4. Upload `lc_1inch14.py` to the Pi Pico. This is a demo file from [Waveshare's Pico LCD 1.14](https://www.waveshare.com/wiki/Pico-LCD-1.14) tutorial. We modified it to be used on different screen sizes and orientations. If you use a different display, use the demo file from your manufacturer, make sure that the class is a child of `framebuf.FrameBuffer`\n\n```python\nclass LCD_1inch14(framebuf.FrameBuffer):\n    ...\n```\n\n4. Upload `example_mario.py` to the Pi Pico\n5. Open `example_mario.py` on Thonny, and check the parameters on the TinyDrawer\n\n```python\ndisplay_w = 240\ndisplay_h = 135\n\ntd = TinyDrawer(\"000877004fff94ff...\", display_w = display_w, display_h = display_h)\n...\n```\n\n6. Run the `example_mario.py` on the Pi Pico. On [Waveshare's Pico LCD 1.14](https://www.waveshare.com/wiki/Pico-LCD-1.14), press the B button to turn off the Mario's autorun mode. Then you can move the player using left stick, right stick and the A button.\n\n#### Next Step\nUpload `example_snake.py` and run it\n\n![waveshare snake](./images/snake_on_lcd_1_14.gif)\n\n\n\u003ca name=\"license\"\u003e\u003c/a\u003e\n\n## Limitations\n\nUpdating more pixels means a drop in framerate since we have to constantly run `spr()`. \n\nComment on the `example_mario.py`\n- Since the camera does not move, the floor of the level and the background above the coin are drawn before entering the game loop. It won't send the updated pixels to the framebuf to save the computation time.\n\nWe will keep optimizing the drawing functions. Feel free to contribute to the project.\n\n\u003ca name=\"license\"\u003e\u003c/a\u003e\n\n## License\n\nThe source code for the site is licensed under the MIT license, which you can find in the LICENSE file.\n\nAll graphical assets are licensed under the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaranomy%2Ftinydrawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaranomy%2Ftinydrawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaranomy%2Ftinydrawer/lists"}