<commit_before>#CharViewer

This project aim to provide a free tool for all the developers that want to integrate a character viewer in their games. 
This project is mostly written in Scala, but the source file are then compiled in JavaScript. That mean you (normally) can use this utility for flash, html5 and Unity games are they all perfectly handle JavaScript.


This project doesn't provide any (interesting) assets. You have to bring your owns. What it does is helping you to provide you a convenient graphical interface to wrap things up.

This project is divided in two distinct parts: 

1. A suits of tools that help you to preview your work and help you to setup things. It work by itself, you just have to open tools.html in a web browser to use it. 
2. A library that can be used form JavaScript to display the result of your work in any application that can use this language.

##How things works.

This character viewer use three levels to manage it's assets. You need to understand what they are to use it.

###The Categories.
The category level is the top level of this character viewer. The categories are represented by the colorful tabs you can see at the top of the tool window (in tool.html). Categories are used to regroup the different option you have to display a same thing. For example if your character can have different hairstyles, you want to create a category named hairstyles with all the different hairstyles he can have. 
The possible option in categories are called Parts. Only one Part that is displayed per categories just as you can only have one hairstyle at once.

###The Parts.
The parts represent the possible options you can display in one category. To see make a part visible put your mouse over the category that contain it and then click on its name.
Each Part also own a translation, a rotation, a scale and a Z value. The Z value is used to determine what is drawn atop of what with the element with the highest Z drawn the more in front. Each part also contain a collection of Images. The Images of a part is what is drawn on the screen when you select a Part. For example if in your Category “Hairstyle” you have a Part “Long hair with bangs” you will have an image for the bangs that must be drawn in front of you character head and an other for the hair that must be drawn bellow it. that are applied to each of their Images. 

###The Images.
The Images are what is actually drawn on you screen. Each image is linked with an image file stored in the folder “images” or in a sub-folder of its. Each image is also linked with one color variable. When displayed the Image will be first multiplied by the value of this color variable. Many Image can be linked with the same color variable. Linking an Image with the color variable “None” make the image bound to none of it. In this case the image will always be displayed with its original colors.
Each image also have a display condition. The display condition allow you to hide an image even if the part that contain it is visible. That can be helpful to prevent the char viewer to display meaningless things. That can also be used to make a part automatically adapt to an other. For example, if your character can be more or less fit, you want it to be visible even if clothed. So if your character is average, you show the default image of his cloth, but you will set the display conditions of its cloth so that if he get a pot belly, this version of his clothes will be hidden and the version where the fabric is stretched at his midsection shown.

Currently here are the implemented display conditions:

* Always: The image is visible is the part that contain it is selected. It's just as not setting any condition.
* Linked to: The image is visible if an other part is also visible. In the example we could have the Image using "green_shirt_fat.png" of the Part "Green shirt" linked to the body part named "Pot belly".
* No visible links: The image is visible if no Linked to image is visible. It can be used to make an image only visible by default. In our example, we could have the Image using "green_shirt_average.png" of the Part "Green shirt" set to this condition so that if it's visible only if we aren't already using a more adapted shirt shape.

As the Parts, each image have a translation, a rotation, a scale and a Z value. To draw an image the viewer will apply it its own transformation but also the transformation of the Part that contain it. For example you have your hairstyle named “Long hair with bangs” the first time you add this Part to the category “Hairstyle” you release that with the default parameters the bangs didn't connect well with the rest of the hair, there is a big unwanted gap that will make your character look like a man in his fifty’s that start loosing its hair. So first you move the Image (by changing its translation or by dragging it) of the bangs so that they connect well with the rest of the hair. But there is an other problem: the hairstyle look good but is drawn in the top left corner of your screen instead of the top of the head of your character. Now you have two choice: move each Image of composing your hairstyle, or directly move the Part “Long hair with bangs” that contain all your Image if you move the Part, all the image it contain will be moved as one solid object.


<commit_msg>add build info on readme<commit_after>#CharViewer

This project aim to provide a free tool for all the developers that want to integrate a character viewer in their games. 
This project is mostly written in Scala, but the source file are then compiled in JavaScript. That mean you (normally) can use this utility for flash, html5 and Unity games are they all perfectly handle JavaScript.


This project doesn't provide any (interesting) assets. You have to bring your owns. What it does is helping you to provide you a convenient graphical interface to wrap things up.

This project is divided in two distinct parts: 

1. A suits of tools that help you to preview your work and help you to setup things. It work by itself, you just have to open tools.html in a web browser to use it. 
2. A library that can be used form JavaScript to display the result of your work in any application that can use this language.

##Building the application. 

Even if this application only use HTML and JavaScript to work, the most of JavaScript code is generated by a compiler form Scala source files. You can try to edit the generated code by hand but that won't be pleasing. Yet, the biggest part of the GUI is defined by tools.htm and settings.js that can easily be modified by humans. If your modification is only aesthetic, any text editor might be enough to implement it. If you want to change how the application work you will need to install sbt that take care of compiling the Scala into JavaScript. Get sbt here http://www.scala-sbt.org/. When it's done, open you favorite terminal, go to the charViwer folder and just type “sbt”. That will setup the project locally. It can take some minutes the first you do it as sbt will download all the component it need to build this project. 

When the sbt project is fully set up enter “cVJS/fullOptJS” in sbt to actually build the project.
Sbt also offer you to setup an eclipse project. Enter “eclipse” in sbt to ask him to do so. To have eclipse set up for scala, you might want to download this version : http://scala-ide.org/.

Building the project might take a bit of time. If you find it too long, you can ask sbt to do less optimization on the code. Build the application with “cVJS/fastOptJS” to do so. 
**Take note that the output files for the fast optimization are not the same that for the full optimization**. As provided on git the project only use the fully optimized code. If you want to make it use the fast optimized code, you have to find <script type="text/javascript" src="./js/target/scala-2.11/charecter-viewer-opt.js"></script> in tools.hmt and replace it with <script type="text/javascript" src="./js/target/scala-2.11/charecter-viewer-**fastopt.js**"></script>


##How things works.

This character viewer use three levels to manage it's assets. You need to understand what they are to use it.

###The Categories.
The category level is the top level of this character viewer. The categories are represented by the colorful tabs you can see at the top of the tool window (in tool.html). Categories are used to regroup the different option you have to display a same thing. For example if your character can have different hairstyles, you want to create a category named hairstyles with all the different hairstyles he can have. 
The possible option in categories are called Parts. Only one Part that is displayed per categories just as you can only have one hairstyle at once.

###The Parts.
The parts represent the possible options you can display in one category. To see make a part visible put your mouse over the category that contain it and then click on its name.
Each Part also own a translation, a rotation, a scale and a Z value. The Z value is used to determine what is drawn atop of what with the element with the highest Z drawn the more in front. Each part also contain a collection of Images. The Images of a part is what is drawn on the screen when you select a Part. For example if in your Category “Hairstyle” you have a Part “Long hair with bangs” you will have an image for the bangs that must be drawn in front of you character head and an other for the hair that must be drawn bellow it. that are applied to each of their Images. 

###The Images.
The Images are what is actually drawn on you screen. Each image is linked with an image file stored in the folder “images” or in a sub-folder of its. Each image is also linked with one color variable. When displayed the Image will be first multiplied by the value of this color variable. Many Image can be linked with the same color variable. Linking an Image with the color variable “None” make the image bound to none of it. In this case the image will always be displayed with its original colors.
Each image also have a display condition. The display condition allow you to hide an image even if the part that contain it is visible. That can be helpful to prevent the char viewer to display meaningless things. That can also be used to make a part automatically adapt to an other. For example, if your character can be more or less fit, you want it to be visible even if clothed. So if your character is average, you show the default image of his cloth, but you will set the display conditions of its cloth so that if he get a pot belly, this version of his clothes will be hidden and the version where the fabric is stretched at his midsection shown.

Currently here are the implemented display conditions:

* Always: The image is visible is the part that contain it is selected. It's just as not setting any condition.
* Linked to: The image is visible if an other part is also visible. In the example we could have the Image using "green_shirt_fat.png" of the Part "Green shirt" linked to the body part named "Pot belly".
* No visible links: The image is visible if no Linked to image is visible. It can be used to make an image only visible by default. In our example, we could have the Image using "green_shirt_average.png" of the Part "Green shirt" set to this condition so that if it's visible only if we aren't already using a more adapted shirt shape.

As the Parts, each image have a translation, a rotation, a scale and a Z value. To draw an image the viewer will apply it its own transformation but also the transformation of the Part that contain it. For example you have your hairstyle named “Long hair with bangs” the first time you add this Part to the category “Hairstyle” you release that with the default parameters the bangs didn't connect well with the rest of the hair, there is a big unwanted gap that will make your character look like a man in his fifty’s that start loosing its hair. So first you move the Image (by changing its translation or by dragging it) of the bangs so that they connect well with the rest of the hair. But there is an other problem: the hairstyle look good but is drawn in the top left corner of your screen instead of the top of the head of your character. Now you have two choice: move each Image of composing your hairstyle, or directly move the Part “Long hair with bangs” that contain all your Image if you move the Part, all the image it contain will be moved as one solid object.



{'fraction_non_alphanumeric': 0.03177898435004791, 'fraction_numerical': 0.0009581603321622484, 'mean_word_length': 4.036188178528348, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6825379', 'n_tokens_mistral': 2964, 'n_tokens_neox': 2871, 'n_words': 2248}