ALICE UI design

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
PyTom
Ren'Py Creator
Posts: 15478
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

ALICE UI design

#1 Post by PyTom » Thu Oct 20, 2005 11:39 pm

Okay, so I'm basically hitting a brick wall when designing the ALICE layer selector... which is the heart of ALICE. Hey, as anyone who's seen Ren'Py probably already knows, I'm no ui designer.

So I thought I'd offer up my two best ideas, and then open the floor for suggestions.

Idea #1

There are two lists of layers, arrainged verically. The top one is a list of available layers, the bottom one has a list of active layers. Two buttons move layers between the lists.

Perhaps the top one should be a tree... maybe not.

Idea #2

A single list or tree, with checkboxes on each entry. The user checks the one they want.

Something Else

If anyone else has an idea, please say it.

Right now, I'm not that excited by ALICE, so I haven't been spending much time on it. Hopefully, a good ui design will help motivate me.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
Alessio
Miko-Class Veteran
Posts: 573
Joined: Fri May 07, 2004 9:40 am
Projects: GO! Magical Boy (2006), Angelic Orbs (soundtrack), Cyberlin (in progress)
Location: Finland
Contact:

#2 Post by Alessio » Fri Oct 21, 2005 12:57 am

Not sure if I'd be an Alice user, but from the useability point of view the checkbox approach is a good one (much in the same way as GIMP has it). It's straightforward and you see at one glance which layer is active and which isn't.

User avatar
saru
Regular
Posts: 27
Joined: Mon Apr 18, 2005 7:05 am
Location: Maeklong , Thailand
Contact:

#3 Post by saru » Fri Oct 21, 2005 1:36 am

ummm . . . it can import picture? i think it can import my paint to make char. . .

ex. http://avatar.comspu.com/ <<< look like this

it must import other eye , mouse , hair to make other char

:D

bookie
Veteran
Posts: 269
Joined: Fri Mar 25, 2005 10:17 pm
Contact:

#4 Post by bookie » Fri Oct 21, 2005 12:07 pm

I'm not exactly sure what you're talking about. Are you talking about the clothes and their layer catagories or the layers themselves that the users get to pic?

I was assuming the layering system wouldn't be accessable to the user, because pants really should always go under belts and bangs should always go over the head, and so on.

Or am I missing something?

User avatar
PyTom
Ren'Py Creator
Posts: 15478
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

#5 Post by PyTom » Fri Oct 21, 2005 3:09 pm

I'm talking about the system that allows people to choose which layers are active, versus which layers are available. So this would be what lets people select which pair of pants to wear, or not to wear pants at all.

User avatar
rioka
Royal Manga Tutor
Posts: 1255
Joined: Fri Jul 16, 2004 12:21 pm
Completed: Amgine Park, Garden Society: Kykuit, Metropolitan Blues (art)
Location: somewhere in NY
Contact:

#6 Post by rioka » Sat Oct 22, 2005 11:12 am

Can you make something similar to this: http://www.kandywhackworld.com/ ?

Have each section classified as:
1. Hair (if chosen, drop down list appears)
a. Front (bangs)
b. Back (ponytail, etc)

2. Facial Expression

3. Top

4. Bottom

5. Socks

6. Shoes

7. Accessories (if chosen, drop down list appears)
a. Head (ribbons, bandana's, etc)
b. Hands (bracelet, watch, gloves, etc )
c. Feet (ankle bracelet etc)

8. Extra Appendages (cat tail, elf ears, etc)

The user chooses one of the buttons 1-8. When chosen, it either makes you select a sub-choice or goes directly to another window where you choose the clothing/hair/etc. In this window, you can move between the choices using left or right arrow (A preview would be nice like in the link provided up above). When the user makes a choice, then they can press a button maybe named "Select" which will then ask them if they want to change the HSL.

When the user goes back to the 8-choice screen, an HSL will appear or a grayed out "HSL" button will now be selectable underneath the choice. If you want to get fancy, you can have an area underneath the choice telling the user what file they're using.

Oh yeah, a "Create Doll" button at the bottom of the 8 choices would be nice when they're done putting things together. =)

--------------
Anyways, my take on the whole layer thing. Folks don't need to know about it. You can designate certain ranges of which layer goes to what. For example, say layer 10 is the body template. Anything below that will be reserved for back of the hair and extra appendages like wings, tails, and so forth. And anything above will be reserved for everything else. Say, 11-15 is for the different layers of undergarments, 16-20 for the layers of a socks, 21-25 for layers of shirt, 26-30 for bottoms (skirt, pants), 31-35 for shoes, etc. If you want, you can add an advanced option for those who want to mess with the layering in an updated version one day.

If you looked at my files, I have them already set for certain sections like the 8 choices and another numbering at the tail end of the name for those with multiple layers for changing the colors. (Forgot to mention this to you, btw... <.<' ^_^;)

I have more things to add but I'll leave that off for another time. Long post. ^^;

User avatar
PyTom
Ren'Py Creator
Posts: 15478
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

#7 Post by PyTom » Sat Oct 22, 2005 1:30 pm

The problem with this is that I'd want ALICE to be a tool, rather than a game/toy in and of itself. As such, it needs to be expandable without my help, which would tend to argue against hard-coding in the name and ordering of layers and groups.

First of all, let me separate the concept of images and layers. My idea is that in ALICE, layers will be something that can be turned on and turned off. Layers will be made up of images, each of which has an ordering associated with it.

This would let us have a layer, call it "coat", which consists of two images, one which encodes the front of the coat and one of which encodes the back of the coat.

Apart from the obvious button to save a doll to disk, there will also need to be ways of scaling and cropping the doll, saving different configurations of layers, and so on.

The problem I'm having here is that pretty soon I'm implementing some fraction of the functionality found in the GIMP.

Hm... perhaps the best way to do this is as a pair of plugins for the GIMP. One to load a doll in, as a series of layers, from one or more doll files, and a second to let the user save the layers that are on and off. We'd lose the separation between layers and images, but that's not that big of a deal.

Grr... I think the big problem is that ALICE will be alot of boring work. (As opposed to Ren'Py, which was alot of interesting work.)

User avatar
rioka
Royal Manga Tutor
Posts: 1255
Joined: Fri Jul 16, 2004 12:21 pm
Completed: Amgine Park, Garden Society: Kykuit, Metropolitan Blues (art)
Location: somewhere in NY
Contact:

#8 Post by rioka » Sat Oct 22, 2005 6:08 pm

I see what you mean. So scratch the hard-coded layering then.

Have people import/open images themselves and make the layers movable like in Photoshop by dragging and dropping above or below each layer. If you don't want to see a layer, click on the "eye" and it'll be hidden. If they don't want the layer anymore, they can drag and drop to the trashcan (or just select the layer and press a delete button). Add a navigation window to scale it up or down, a dedicated HSL window, and a special crop option.

If that's completely off the wall or undoable - blame it on an empty stomach. <.<'
Attachments
ALICE.jpg
Eclipse's hair brained ALICE idea aping Photoshop.
(138.68 KiB) Downloaded 95 times

bookie
Veteran
Posts: 269
Joined: Fri Mar 25, 2005 10:17 pm
Contact:

#9 Post by bookie » Sat Oct 22, 2005 7:34 pm

Is there a way to let artists create a packet that the ALICE program can read so that you don't have to do the hard work every time more objects are added to it?

For example, if you've ever heard of step mania, you download the game and then have to find all the rounds seperatly because they're all user made. The program knows to look for a folder in a certain heirarchy and how to deal with the sets of information in those folders.

So if you had a folder tree like this:

root>Package>layer type

ALICE could look at that and know what was what?

Does that address the problem you're having or am I totaly off base?

User avatar
PyTom
Ren'Py Creator
Posts: 15478
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

#10 Post by PyTom » Sat Oct 22, 2005 10:06 pm

Eclipse >>> If people are happy with the click to toggle layer idea, then I can do that. I think I'm leaning towards that now, although I'd need to figure out how.

I'm not sure if people would be able to move around layers... if we allow that, we'd be just another kiss system.

bookie >>> Yes, I would think ALICE will auto-configure. Right now, I'm thinking of a directory of files like:

alice.clothes.coat.front-42.png

The components of the file name are:

doll name "alice"

group name "clothes"

layer name "coat"

image name (optional) "front"

The order number "-42", used to order images. Negative numbers are closer to the user, positive numbers are farther, sign is mandatory.


I'd also allow zip files to be placed in that directory, containing filenames of this type.

Beta
Regular
Posts: 66
Joined: Thu Apr 28, 2005 5:53 pm
Location: not where I was five seconds ago
Contact:

#11 Post by Beta » Mon Oct 24, 2005 3:07 pm

PyTom wrote:...
alice.clothes.coat.front-42.png
...
hmm... has someone been hitchhiking across the galaxy a bit too much?

on-topic...

I hope that a public testing release* comes soon (within about... oh, I'd say three months)... I think Zeta was considering telling his english teacher a little bit more about the NaNoRenO and Ren'Py, and if what he plans on suggesting for an extra credit project actually gets accepted by the english teacher (I won't name the teacher if he doesn't...), we may have a bigger number of NaNoRenO participants, and this tool would help immensely with that.

*(not using the common phrase for it (beta version!) because I don't feel like I want a version with my name on it... yet)

User avatar
rioka
Royal Manga Tutor
Posts: 1255
Joined: Fri Jul 16, 2004 12:21 pm
Completed: Amgine Park, Garden Society: Kykuit, Metropolitan Blues (art)
Location: somewhere in NY
Contact:

#12 Post by rioka » Mon Oct 24, 2005 6:55 pm

Yes, it would be nice if something was completed before NaNoRenO - only 5 months away! No pressure, PyTom!

Post Reply

Who is online

Users browsing this forum: No registered users