# Character Creation

**URL:** <https://community.thunkable.com/t/character-creation/2975383>\
**Category:** Questions about Thunkable X\
**Created:** [April 29, 2024, 1:38pm UTC](https://community.thunkable.com/t/character-creation/2975383 "2024-04-29T13:38:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [April 29, 2024, 1:38pm UTC](https://community.thunkable.com/t/character-creation/2975383/1 "2024-04-29T13:38:00Z")

</div>

Hi, I want to create an app where users can customize characters. To change hair style, eye color, skin color and clothing. Is this possible on thunkable. I need a tutorial

---

<div class="post-metadata">

**Author:** ![emlee703](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emlee703/32/165400_2.png) [@emlee703](https://community.thunkable.com/u/emlee703)\
**Post date:** [April 29, 2024, 2:22pm UTC](https://community.thunkable.com/t/character-creation/2975383/2 "2024-04-29T14:22:29Z")

</div>

Welcome!  
While I don’t know the proper blocks to create this, it is more than possible!  
Possibly someone else can help, or you can find some things online.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 29, 2024, 3:02pm UTC](https://community.thunkable.com/t/character-creation/2975383/3 "2024-04-29T15:02:03Z")

</div>

One way to do this is to name all of your eye images eye1.png, eye2.png, eye3.png, etc.

Have a button (or two buttons) that change app variable eyeNum to the next number (1, 2, 3, 4, etc.) and set the image’s background picture to [join] “eye” + app variable eyeNum.

* * *

Need help on the forums? Make sure to read this: [How to ask Great Questions v2.0](https://community.thunkable.com/t/how-to-ask-great-questions-v2-0/2689983)

Want to hire a Certified Thunkable Expert? [Tatian G | Profile | Fiverr](https://www.fiverr.com/tatiang)

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [April 29, 2024, 6:21pm UTC](https://community.thunkable.com/t/character-creation/2975383/4 "2024-04-29T18:21:10Z")

</div>

Please can you make a tutorial video for me on this?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 29, 2024, 10:12pm UTC](https://community.thunkable.com/t/character-creation/2975383/5 "2024-04-29T22:12:44Z")

</div>

I can certainly do that. We can arrange details over private messages here or on Fiverr. It takes about an hour to make a tutorial video, edit it, and share it with you.

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [April 29, 2024, 10:23pm UTC](https://community.thunkable.com/t/character-creation/2975383/6 "2024-04-29T22:23:51Z")

</div>

What are the details

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 29, 2024, 10:58pm UTC](https://community.thunkable.com/t/character-creation/2975383/7 "2024-04-29T22:58:42Z")

</div>

If you’re wanting to hire me to make a tutorial video, we’d have to work out pricing, etc. If not, and you’re just asking for help, I may be able to make a simple demo for you but it wouldn’t be a video because again, that takes some time.

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [April 30, 2024, 1:19am UTC](https://community.thunkable.com/t/character-creation/2975383/8 "2024-04-30T01:19:15Z")

</div>

A simple demo would go a long way. Especially one that shows the basics of how to put an avatar creation app together

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 30, 2024, 2:23am UTC](https://community.thunkable.com/t/character-creation/2975383/9 "2024-04-30T02:23:13Z")

</div>

Here’s the basic idea:

Project link: [Thunkable](https://x.thunkable.com/copy/1aadf448806afb59002bc55274ba32aa)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/7/47ce4cef6ece6015b32720cbab35ede7b13ad49d.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/0/b0fc6470f94e4f9527d2ffd1fb3f1bf836e5aa76.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/3/c33547626535c698c972504984b215f0214df1b9.png)

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [April 30, 2024, 6:03am UTC](https://community.thunkable.com/t/character-creation/2975383/10 "2024-04-30T06:03:01Z")

</div>

Do you have to use images with transparent backgrounds?  
Like for the eye image, hair style image, etc

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 30, 2024, 6:29am UTC](https://community.thunkable.com/t/character-creation/2975383/11 "2024-04-30T06:29:34Z")

</div>

Probably. You haven’t really provided many details so it’s hard to answer that.

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [May 2, 2024, 2:58pm UTC](https://community.thunkable.com/t/character-creation/2975383/12 "2024-05-02T14:58:28Z")

</div>

[![](https://ssl.gstatic.com/docs/doclist/images/icon_10_generic_list.png)VID\_20240502\_153628.mp4](https://drive.google.com/file/d/1hBEUTJ6VE_nV43HWQl_cYEn_8imeIhLG/view?usp=drive_web) ![](https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/close_baseline_nv700_20dp.png)  
I attached a video to try and explain what I have in mind for this app.  
On the home page will be images of different avatars.  
The user opens the app and selects an image of their choice.  
Each image is uploaded by an artist  
And for each of these images different hairstyles, skin colour and clothing have been premade.  
When a user selects an image, they would be able to modify these characteristics.  
So in summary the app gives room for an admin to be able to upload new avatars with different hairstyles, skin color and clothing

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 2, 2024, 5:03pm UTC](https://community.thunkable.com/t/character-creation/2975383/13 "2024-05-02T17:03:44Z")

</div>

You’ll need to make that file publicly accessible.

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/b/5be0e7721979167934b9d805b911ccb5de060df8.png)

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [May 2, 2024, 5:17pm UTC](https://community.thunkable.com/t/character-creation/2975383/14 "2024-05-02T17:17:53Z")

</div>

You can view it now

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 2, 2024, 5:52pm UTC](https://community.thunkable.com/t/character-creation/2975383/15 "2024-05-02T17:52:19Z")

</div>

Yes, the images would need to have transparent backgrounds. I haven’t made anything with that many overlapping images but I think you can do it by setting each image’s x/y positions in the properties panel.

Hopefully my demo above gives you an idea about how to proceed. There are many steps involved in creating what you want but I would focus on modifying the demo to work the way you want it. Then try a second body part and set that up to change as well. See how that looks. If you get stuck, post a screenshot of your blocks or a link to your project and someone may be able to help you.   
  
·····················································································································  
Need help? [How to Ask Great Questions](https://community.thunkable.com/t/how-to-ask-great-questions-v2-0/2689983) ✨ [Debugging A Project](https://community.thunkable.com/t/debugging-in-thunkable-x-video/849471) ✨ [API JSON Tutorial](https://community.thunkable.com/t/api-json-tutorial-video/1140575)

Want to hire a Certified Thunkable Expert? [Elevate your app with Tatiang on Fiverr](https://www.fiverr.com/s/726B4a)

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [May 3, 2024, 2:51am UTC](https://community.thunkable.com/t/character-creation/2975383/16 "2024-05-03T02:51:10Z")

</div>

I want to understand blocks more. Please can you send me blocks with overlapping image functions.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 4, 2024, 5:20am UTC](https://community.thunkable.com/t/character-creation/2975383/17 "2024-05-04T05:20:48Z")

</div>

I don’t have blocks for that. I would need to create a project to demonstrate that. I know how to layer components using a “z” value in the older snap to place interface but with the new drag and drop interface, I’d have to think about how to do that. I think it would be really hard to work with overlapping images in that interface. But maybe not!

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [May 4, 2024, 2:57pm UTC](https://community.thunkable.com/t/character-creation/2975383/18 "2024-05-04T14:57:28Z")

</div>

How can I group multiple overlapping images so that it can be downloaded as a single image to a device

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 4, 2024, 5:33pm UTC](https://community.thunkable.com/t/character-creation/2975383/19 "2024-05-04T17:33:41Z")

</div>

I have no idea! I’ve never heard that question before. Users would typically have to take a screenshot on the device which involves the device hardware, not Thunkable. There might be a way to take a screenshot with Javascript…

---

<div class="post-metadata">

**Author:** ![emmyizi101q1s](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/emmyizi101q1s/32/175278_2.png) [@emmyizi101q1s](https://community.thunkable.com/u/emmyizi101q1s)\
**Post date:** [May 5, 2024, 7:06am UTC](https://community.thunkable.com/t/character-creation/2975383/20 "2024-05-05T07:06:47Z")

</div>

I want to make a button that can be clicked multiple times to change one image to different images

[Next page](https://community.thunkable.com/t/character-creation/2975383.md?page=2)
