EN /HU | Login

Real World karakterek és háttérképek előállítása

Ez a dokumentum a point-and-click típusú videojátékokhoz a karakterek és a háttérképek előállításának módszerét írja le. A módszerket a TTG Egyesület a saját játékainak kifejlesztéséhez dolgozta ki.

Karakterek előállítása

Előfeltételek

  • Karakterek nevei és belső és külső tulajdonságait tudnunk kell.

1. lépés : Karakterek prompt-jainak meghatározása

  • A karakterekhez meg kell határozni a prompt-okat: karakter típusa, arc és haj, ruházat, testtartás / póz, háttér, fény, textúra, rajz stílus, árnyékolás, művészeti / hangulati stílus, részletesség, kompozíció.

2. lépés : Karakterek generálása

  • A karaktereket a prompt-jaik alapján generálhatjuk Fooocus-al.
  • Ha ugyanezt Geminivel csináljuk, akkor sokkal jobb eredményt érhetünk el.

3. lépés : Character Design Sheet előállítása

  • Ehhez a karakter képét feltöltjük referenciának az AI-nak.
  • Majd a character design sheet generáló prompt-al előállítjuk a character sheet-et.

4. lépés : Karakter animálása

  • Ehhez a character design sheet-et feltöltjük referenciának az AI-nak.
  • Majd a jobbra vagy le és fel sétát leíró prompt-al generáljuk a rövid videót.

5. lépés : Karakter animáció véglegesítése

  • Ezeket a lépéseket még nem tudom, hogy mivel tudom megcsinálni.
  • Animáció hátterének eltávolítása.
  • Animáció canvas méretének csökkentése, hogy a karakter éppen elférjen benne.
  • Animáció átméretezése alacsonyabb felbontásra.
  • Animáció színeinek színpalettára konvertálása.
  • Animáció pixel art kinézetének javítása.

Háttérképek előállítása

Előfeltételek

  • Mielőtt bármilyen helyszínt készítünk, szükségünk van a karakterekre.
  • A karakterek azért fontosak, mert a méretükhöz kell méretezni a képernyő tárgyait.

1. lépés : Helyszínek meghatározása

  • Miután megvan a történet, meg kell határozni a helyszíneket.
  • A helyszínekhez mellékelni kell azok leírásait.
  • A helyszínekhez meg kell határozni a kötelező elemeket. pl. középen ebédlőasztal
  • A helyszínekhez meg kell határozni a mozdítható elemeket. pl. újság az asztalon

2. lépés : Helyszínek prompt-jainak meghatározása

  • A helyszínekhez meg kell határozni a promptokat.
  • Kell egy bevezető promptot, ami a point-and-click háttérképeket általában leírja.
  • Kell egy mondat a képernyő tárgyáról, hogy mit ábrázolunk. pl. garázs
  • Majd térrészenként fel kell sorolni, hogy hol milyen tárgyak találhatók.

3. lépés : Helyszínek generálása generatív AI-al

  • A helyszínek prompt-jai alapján AI-al generáljuk a háttérképeket.
  • Ha nem tetszik egy kép, akkor újra generáljuk.
  • A lényeg, hogy az kép elrendezése megfelelő legyen.
  • A tárgyakat majd később tudjuk cserélgetni.

4. lépés : Kép átrajzolása papírra

  • Az adott háttérképet kinyomtatjuk halványan.
  • Majd átrajzoljuk a nekünk szükséges részeket.
  • Itt az a lényeg, hogy megkapjuk a kép szerkezetét, az épületeket, szobákat, stb.
  • Majd az átrajzolt képet szkenneljük és a hátteret eltűntetjük, magas kontraszttal.

5. lépés : Kép színezése

  • Fooocus alkalmazással képregény stílust használva kiszínezzük a képet.
  • A kép nem biztos, hogy a megfelelő színű lesz, de ez most nem érdekes.
  • A színezést azért csináljuk, hogy utána inpainting-el tudjunk tárgyakat cserélni.
  • Ha jobb eredményt akarsz elérni, akkor kinyomtatod a rajzod és azt színezed ki.

Lehet még Geminivel is színezni, de azt nem használ a TTG, mert az nem open source.

6. lépés : Tárgyak cseréje

  • Fooocus alkalmazással inpainting-et használva kicseréljük a tárgyakat.
  • Egy tárgyat azért akarunk cserélni, mert vagy nem megfelelő vagy hiányzik.

7. lépés : Kép véglegesítése

  • A képet vagy kinyomtatjuk, átrajzoljuk, vonalasítjuk, kiegészítjük, majd szkenneljük.
  • Vagy a képet egyből a LibreSprite-ban megnyitjuk és megrajzoljuk a részleteket.

Karakterek előállításának részletei

1. lépés : Karakterek prompt-jainak meghatározása

1. Elő kell állítani egy sablon prompt-ot, ami a következőket tartalmazza: karakter típusa, arc és haj, ruházat, testtartás / póz, háttér, fény, textúra, rajz stílus, árnyékolás, művészeti / hangulati stílus, részletesség, kompozíció.

Tipp: Az AI-val akár elő tudunk állítani egy olyan angol nyelvű promptot, ami tartalmazza a karakteren kívüli jellemzőket: háttér, fény, textúra, rajz stílus, árnyékolás, művészeti / hangulati stílus, részletesség, kompozíció. Ehhez beadjuk a játék történetének leírását az AI-nak és kérünk tőle egy ilyen prompt-ot.

Tipp: A karakter jellemzőit leíró részt is generáltathatjuk AI-val. Beadjuk a történetet és amiket eddig tudunk a karakterről, plusz a kívánt jellemzőket: karakter típusa, arc és haj, ruházat, testtartás / póz.

Sárga kabátos kisfiú prompt

Stylized cartoon boy character, full body, messy spiky black hair, large expressive eyes looking upward, soft innocent facial expression, wearing oversized mustard yellow hoodie, black ripped skinny jeans, brown boots, small backpack, standing straight, neutral pose, black oval eyes and nose, minimal facial features, cute companion design. Clean green background, soft lighting, painterly texture, hand-drawn illustration style, slightly rough sketch lines, subtle shading, whimsical children's book aesthetic, high detail, centered composition.

3. lépés : Character Design Sheet előállítása

1. Töltsük fel a karakter képét az AI-nak (pl. Gemini), mint referencia.
2. Prompt-nak használjuk a Character Design Sheet prompt-ot.

Character Design Sheet prompt

Create a professional character design sheet.

Image layout:
The image is visually divided into three vertical sections using composition and spacing only. No borders, no frames, no boxes, no lines separating sections.

Top section – Reference only:
Multiple visual references of the same character: Full-body front view, Full-body side view, Full-body back view, Face close-up (front view). This top reference section is used for visual guidance only and must disappear immediately at the start of the video (less than one second).

Middle section:
Completely empty space. No character, no objects, no text.

Bottom section – Final character:
The same character in one ideal full-body pose, Natural, appealing, hero-style stance, Centered and clearly visible.

Consistency rules:
The character must remain 100% identical across all sections. No changes to face, body proportions, hairstyle, colors, or clothing. Same character model in every view and pose.

Background:
Solid green background.

Restrictions:
No text, no letters, no symbols, no labels. No borders, no frames, no dividing lines.

Technical requirements:
Vertical composition, Aspect ratio 9:16, High resolution.

4. lépés : Karakter animálása

1. Töltsük fel a Character Design Sheet-et az AI-nak (pl. Gemini), referenciának.
2. Prompt-nak használjuk a megfelelő irányú séta prompt-ját.

Right walking video prompt

Create a seamless looping animated video of the reference character performing a complete two-step 2D side-view walk cycle while walking to the right.

The animation must be no longer than 6 seconds. Complete exactly two alternating steps and then return to the exact starting pose. If the cycle finishes before 6 seconds, end the video immediately. The first and last frames must match perfectly, allowing the video to loop indefinitely without any visible jump or pause.

Keep the character visually identical to the reference image throughout the entire animation. Do not change the character's design, proportions, clothing, colors, facial features, hairstyle, accessories, or art style.

Show only one full-body character, centered and fully visible from head to feet at all times. The character must remain stationary horizontally while performing the walk cycle. Keep the camera fixed with constant framing, scale, and orientation.

Animate a natural two-step walk cycle:
first leg forward → passing pose → opposite leg forward → return to the exact starting pose.
The arms must naturally counter-swing with the legs. Add subtle secondary motion to the head, torso, clothing, hair, straps, and accessories.

Keep the background as a single flat solid color matching the original character sheet exactly. No scenery, ground, props, shadows, particles, parallax, or other elements.

Preserve the original hand-drawn style, colors, lighting, and details. No flickering, morphing, deformation, duplicated or missing limbs, extra body parts, cropping, camera movement, zooming, or style changes.

The result must be a stable, natural, temporally consistent, perfectly seamless two-step walk-cycle loop.

Left walking video prompt

Create a seamless looping animated video of the reference character performing a complete two-step 2D side-view walk cycle while walking to the left.

The animation must be no longer than 6 seconds. Complete exactly two alternating steps while moving smoothly to the left, then return to the exact starting pose and relative animation state. If the complete cycle finishes before 6 seconds, end the video immediately. The first and last frames must match in character pose and animation state, allowing the cycle to loop seamlessly.

Keep the character visually identical to the reference image throughout the entire animation. Do not change the character's design, proportions, clothing, colors, facial features, hairstyle, accessories, or art style.

Show only one full-body character, fully visible from head to feet. The character faces and walks toward the left side of the frame. The camera remains fixed with constant framing, scale, and orientation. The character moves smoothly from right to left without changing size or perspective.

Animate a natural two-step walk cycle:
first leg forward → passing pose → opposite leg forward → return to the starting walking pose.
The arms naturally counter-swing with the legs. Add subtle secondary motion to the head, torso, clothing, hair, straps, and accessories.

Keep the background as a single flat solid color matching the original character sheet exactly. No scenery, ground, props, shadows, particles, parallax, or other elements.

Preserve the original hand-drawn style, colors, lighting, and details. No flickering, morphing, deformation, duplicated or missing limbs, extra body parts, cropping, camera movement, zooming, or style changes.

The result must be a smooth, natural, temporally consistent two-step walking animation moving from right to left, designed to loop seamlessly.

Walking down video prompts

Create a seamless looping animated video of the reference character performing a complete two-step 2D walk cycle while walking directly away from the camera toward the bottom of the frame.

The animation must be no longer than 6 seconds. Complete exactly two alternating steps while moving smoothly downward, then return to the exact starting pose and animation state. If the complete cycle finishes before 6 seconds, end the video immediately. The first and last frames must match in character pose and animation state, allowing the cycle to loop seamlessly.

Keep the character visually identical to the reference image. At the beginning of the animation, the character is shown facing directly toward the camera. The character then walks straight downward toward the bottom of the frame. Do not animate a turning motion; begin directly with the front-facing walking pose.

Show only one full-body character, fully visible from head to feet. The camera remains fixed with constant framing, scale, and orientation. The character moves smoothly from the upper part of the frame toward the bottom.

Animate a natural two-step walk cycle:
first leg forward → passing pose → opposite leg forward → return to the starting walking pose.
The arms naturally counter-swing with the legs. Add subtle secondary motion to the head, torso, clothing, hair, straps, and accessories.

Keep the background as a single flat solid color matching the original character sheet exactly. No scenery, ground, props, shadows, particles, parallax, or other elements.

Preserve the original hand-drawn style, colors, lighting, proportions, and character details. No flickering, morphing, deformation, duplicated or missing limbs, extra body parts, cropping, camera movement, zooming, or style changes.

The result must be a smooth, natural, temporally consistent two-step walking animation moving straight downward, designed to loop seamlessly.

Video prompts walking up

Create a seamless looping animated video of the reference character performing a complete two-step 2D walk cycle while walking straight upward toward the top of the frame.

The animation must be no longer than 6 seconds. Complete exactly two alternating steps while moving smoothly upward, then return to the exact starting pose and animation state. If the complete cycle finishes before 6 seconds, end the video immediately. The first and last frames must match in character pose and animation state, allowing the cycle to loop seamlessly.

Keep the character visually identical to the reference image. At the beginning of the animation, the character is shown from behind, facing directly away from the camera. The character then walks straight upward toward the top of the frame. Do not animate a turning motion; begin directly with the rear-facing walking pose.

Show only one full-body character, fully visible from head to feet. The camera remains fixed with constant framing, scale, and orientation. The character moves smoothly from the lower part of the frame toward the top.

Animate a natural two-step walk cycle:
first leg forward → passing pose → opposite leg forward → return to the starting walking pose.
The arms naturally counter-swing with the legs. Add subtle secondary motion to the head, torso, clothing, hair, straps, and accessories.

Keep the background as a single flat solid color matching the original character sheet exactly. No scenery, ground, props, shadows, particles, parallax, or other elements.

Preserve the original hand-drawn style, colors, lighting, proportions, and character details. No flickering, morphing, deformation, duplicated or missing limbs, extra body parts, cropping, camera movement, zooming, or style changes.

The result must be a smooth, natural, temporally consistent two-step walking animation moving straight upward, designed to loop seamlessly.