PicoPixel

PicoPixel में pets कैसे use करें

Pets ready-made animated sprites हैं जिनमें multiple modes होते हैं जिन्हें किसी भी condition पर trigger कर सकते हैं. Directory से एक चुनें, project में add करें, और उसे अपने device की activity पर react कराएं: data fetch, overheating, code review, जो चाहें.

PI PicoPixel
pets sprites picopixel lvgl esp32
अपडेटेड 2026-06-01
01 /09

Overview

यह guide PicoPixel में pets use करना समझाती है: directory से एक चुनने से लेकर उसे अपने project में drop करने और hardware की activity पर react कराने तक.

एक pet अपने नौ modes के साथ दिखाया गया है: Idle, Run right, Run left, Waving, Jumping, Failed, Waiting, Running और Review, left में Waving mode preview है
▸ एक pet, नौ modes. कौन-सा कब play होगा, आप चुनते हैं.

यह सीधे दो other guides पर built है. Underlying concept चाहिए तो पहले What is a sprite? पढ़ें. अपना pet publish करना है तो How to submit a pet देखें. यह article बीच में है: किसी और द्वारा already built pet को use करने का practical, hands-on tutorial.

Prior animation work जरूरी नहीं. अगर आप "Add to project" क्लिक कर सकते हैं और widget canvas पर drag कर सकते हैं, तो अपने ESP32 या LVGL project को living, reacting character दे सकते हैं.

02 /09

Pets क्या हैं?

Pet एक sprite है, single widget जिसमें several different animations रहती हैं और आप demand पर उनके बीच switch कर सकते हैं. हर animation एक mode है (state या phase भी कहते हैं): "Idle," "Run right," "Jumping," and so on.

Codex- या Petdex-style packs से आए pets generally out of the box 9 modes के साथ ship होते हैं, जैसे Idle, Run right, Run left, Waving, Jumping, Failed, Waiting, Running और Review. हर mode frames का अपना little loop है, और आप decide करते हैं कौन-सा कब play होगा.

पूरी idea यही है: one widget, many behaviors, जिन्हें आपकी conditions switch करती हैं.

NOTE

Technical level पर LVGL में multi-state sprite का native concept नहीं है; हमने इसे LVGL animated image widget के ऊपर बनाया ताकि modes आपके लिए wired up मिलें. Full background के लिए What is a sprite? देखें.

03 /09

Pet क्यों use करें?

Pets आपके ESP32 या LVGL project में life का spark देते हैं. Static face या single looping animation के बजाय sprite react करता है: device पर actual happening के based modes switch करता है.

Original inspiration code companion है. Codex-style screen imagine करें जहां छोटा character coding session पर react करता है: आप सोचते हैं तो idle, diff read करते समय "Review", build break होने पर "Failed". Pet app की activity mirror करता है.

PicoPixel इसे आगे ले जाता है: जो भी action या trigger express कर सकते हैं, उसे animate कर सकते हैं. कुछ examples:

  • Temperature reading threshold cross करे तो Jumping पर switch करें.
  • API से data fetch करते समय Running play करें, फिर response आने पर Idle पर लौटें.
  • Sensor motion detect करे तो Waving fire करें, या request timeout हो तो Failed.

अगर project में दिखाने लायक states हैं, pet उन्हें दिखाने का fast, expressive तरीका है, बिना animation code लिखे.

04 /09

Directory से pet चुनें

Start करने के लिए PicoPixel account बनाएं, फिर pets directory पर जाएं: picopixel.io/pets.

Gallery browse करें, पसंद का character ढूंढें, और उसका detail page खोलें.

PicoPixel pets directory में pet cards की horizontal strip, जिसमें BananaCat, DaoDun, Savage Codex, Clawd, Luffy और NezukoCoder शामिल हैं
▸ Pets directory, community gallery browse करें और companion चुनें.

Pet के detail page पर Add to project क्लिक करें. PicoPixel pet import करके सीधे dashboard में डाल देता है: no setup, no file wrangling.

PicoPixel dashboard के Drafts section में नया imported Clawdex pet दिख रहा है
▸ Add to project pet import करता है, वह dashboard के Drafts में दिखाई देता है.
05 /09

अभी आपको क्या मिला

Pet add करने से single project बनता है जिसमें एक Sprite widget होता है, pet के हर mode के साथ pre-loaded. Open करें तो canvas पर sprite दिखेगा, और right-hand panel में सारे modes listed होंगे: Idle, Run right, Run left, Waving, Jumping और बाकी, हर एक अपने frame count और duration के साथ.

PicoPixel editor canvas में Clawdex sprite open है, right side Build panel में modes Idle, Run right, Run left, Waving, Jumping listed हैं
▸ Pet Sprite widget के रूप में खुलता है, हर mode ready to go.

अगर Sprite widget नया है, तो What is a sprite? guide modes, frames और durations detail में समझाती है.

Assets tab पर switch करें और वही sprite project की local library में reusable component के रूप में saved मिलेगा. यही pet को real projects में ले जाने की key है.

Assets tab में Clawdex sprite local library में reusable component के रूप में saved दिख रहा है
▸ Assets के अंदर pet reusable component भी है, shelf-ready copy.
06 /09

Pet use करने के तीन तरीके

Pet का अपना project सच में delivery vehicle है. उसे actual project में लाने के तीन तरीके हैं.

1. Layer copy और paste करें

Quickest option: pet project में sprite layer select करें, copy करें, दूसरा project खोलें, और paste करें. Sprite अपने सभी modes के साथ आता है. One-off के लिए अच्छा; अगर pet सिर्फ एक जगह चाहिए, done.

2. Pet को library बनाएं (reuse के लिए recommended)

अगर आप pet को कई workspaces में use करेंगे, तो उसके project को library बनाएं. File publish करने से उसके assets, including sprite, आपकी team के workspaces में anywhere import के लिए available होते हैं.

Publish करने के लिए:

  1. Pet project में Assets tab खोलें और Add Library चुनें.
  2. Publish क्लिक करें.

फिर another project से use करने के लिए:

  1. अपना new या existing workspace खोलें.
  2. Add Library चुनें.
  3. नीचे दिखाए अनुसार Shared libraries list से pet की library link करें.
PicoPixel में Libraries dialog, left में Clawdex Sprite file library और Publish button, right में link करने के लिए available shared libraries
▸ Pet की file को library के रूप में publish करें, फिर किसी भी other workspace से link करें.

Link होने के बाद sprite उस workspace के Assets में दिखाई देता है. Canvas पर drag and drop करें और वह fully pre-configured load होगा, pet के हर mode के साथ.

OpenClaw Pet नाम के नए workspace project में Clawdex pet fully loaded है, right-hand panel में उसके सभी modes listed हैं
▸ Fresh workspace में drag करने पर pet सभी modes intact लेकर आता है.
TIP

Libraries team के अंदर reuse के लिए हैं, world में publish करने के लिए नहीं. Library क्या hold करती है, publishing कैसे काम करता है, और linked libraries कहां appear होती हैं, इसके लिए Guide to libraries and reusable components देखें.

3. Project properties hardware से match करें

आप pet project की properties (screen size, target board) को अपने device से match करके सीधे उसी में build भी कर सकते हैं. यह works, लेकिन recommended path नहीं है: pet और actual project के बीच clean separation खो जाती है, और pet project showcase के रूप में setup है, template नहीं. पहले options 1 या 2 choose करें.

07 /09

Wire it up: pet को react कराएं

जो pet सिर्फ Idle play करता है, वह ज्यादा कुछ नहीं करता. Payoff event editor से आता है, जहां आप बताते हैं कब modes switch करने हैं.

Pattern simple है: जब कुछ happens, mode पर switch करें. Trigger चुनें, button press, value change, timer, और action Set Sprite Mode चुनें, फिर play होने वाला mode.

नीचे screenshot में हमने JUMP! button पर event add किया: click होने पर action sprite mode को Jumping set करता है, इसलिए button press होते ही pet leap करता है.

PicoPixel event editor जिसमें JUMP button पर Clicked event है, action Set Sprite Mode Jumping पर set है
▸ Event: JUMP! button click होने पर pet Jumping mode पर switch करता है.

Trigger को आपके project की किसी भी चीज से swap करें, sensor reading, API call finish होना, timer firing, और वही wiring pet को react करा देगी. Triggers, sources और actions की full rundown के लिए Using the event editor देखें.

08 /09

कुछ बातें ध्यान में रखें

कुछ practices pet को real hardware पर अच्छा दिखने और चलने में मदद करेंगी.

  • जो modes use नहीं करेंगे उन्हें remove करें. यह strongly recommended है. हर kept mode memory में more frames है, और unused ones pure overhead हैं. Storage- या memory-constrained boards पर trimming सबसे important है; जो mode trigger नहीं करेंगे उसे delete करें.
  • Events मत भूलें. Pet अपने आप कुछ नहीं करता. हर mode के लिए condition add करने को event editor use करें, जैसे ऊपर JUMP! button wire किया.
  • Device memory पर ध्यान दें. Animated images को frames hold करने के लिए enough RAM चाहिए. Exported LVGL code की README.md file अपने coding assistant को दें; यह document करती है, या खुद ensure करें कि animated images के लिए enough memory allocated है. Flashing के बाद sprite न दिखे तो लगभग हमेशा यही वजह होती है.
WARNING

Sprites heavy हो सकते हैं. Small microcontroller पर all 9 modes और large frames वाला pet memory exhaust कर सकता है और render नहीं होगा. सिर्फ actual use वाले modes रखें, और confirm करें कि LVGL configuration animated images के लिए enough RAM allocate करती है.

09 /09

आगे कहां जाएं

आगे पढ़ें

जारी रखें।

PicoPixel templates, UI kits और full apps कैसे use करें thumbnail
PICOPIXEL

PicoPixel templates, UI kits और full apps कैसे use करें

PicoPixel templates, UI kits, examples, sprites, widgets और full app files ढूंढें, फिर उन्हें open, download, import, customize और अपने device के लिए LVGL C code के रूप में export करें.

templates · ui-kits · full-apps
sprite क्या है? thumbnail
PICOPIXEL

sprite क्या है?

जानें कि sprites क्या होते हैं, multi-state animated widgets कैसे बनाते हैं, और उन्हें projects में फिर से कैसे use करते हैं.

sprite · picopixel
event editor का उपयोग thumbnail
PICOPIXEL

event editor का उपयोग

PicoPixel के event editor से UI interactive बनाएं: एक widget से दूसरे तक connection drag करें, click या value change जैसा trigger चुनें, और तय करें कि क्या होगा.

events · interactions · picopixel