Build Your Own Protagonist

Avatar

By Sanglorian 26 Jan 2017 22:35

Champion · 550 comments

Hi folks,

I've put my mix-and-match system for making overland sprites up on Open Game Art:

http://opengameart.org/content/build-yo … -and-match

Avatar

By tamashihoshi 27 Jan 2017 09:09

Champion · 261 comments

Probably a character builder tool would be cool for this, like make.tuxemon.org
https://drive.google.com/open?id=0B3jcv … XFhWGtQNG8
here's something I tried quickly... sorry for the messy code, I didn't do javascript since... erm... a very long time now*.

Unzip it, then double click main.html... and... yeah.. click the images below to choose a base, a hair and stuff. Very basic, I'm not sure how to export it and if that's the best solution...

Also sorry for not taking your sprites! I wanted to have only a few basic sprites (also big ones) to test this out quickly

*Actually I only did javascript once when I was at school.. so my javascript experience is almost zero.


Avatar

By Sanglorian 30 Jan 2017 05:51

Champion · 550 comments

That looks great! Exactly the kind of thing I was imagining (if we find a way to export it).

Avatar

By tamashihoshi 31 Jan 2017 08:09

Champion · 261 comments

Using a Canvas instead of div boxes would work.. but I wasn't able to figure out how to draw multiple images into one canvas hmm

edit:
This one works: http://www.html5canvastutorials.com/tut … ge-loader/
If I have the time I'll work on a chara maker

Last edited by tamashihoshi (31 Jan 2017 08:46)


Avatar

By tamashihoshi 31 Jan 2017 11:38

Champion · 261 comments

Great News:
it works.
https://drive.google.com/open?id=0B3jcv … 0pjX2s4aDg

took sanglorians "individual PNGs" zip for this + the link I posted before (it's also in the script.js)

Click the icons below to select the body/clothes/hair etc....
the image you see above is a "normal image"... which means, you can right click + save it and be happy

not all sprites have been implemented yet (obviously)

we need an easier way to name the sprites... if I want to add a base, I'd have to rename all other sprites to have a correct enumaration...


Avatar

By tamashihoshi 31 Jan 2017 11:45

Champion · 261 comments

What we need to do next is probably:
- think of a good design for the page (probably responsive)
- think of a good way to enumerate the sprites
- create icons/buttons for the different clothes (probably a little bigger)
- probably add a fancy save button (see: http://jsfiddle.net/epistemex/kyjs655r/ )
- probably put all credits on the page? (CC and stuff)

once we're done we can create the site and shadowapex could put it online...
since we'd have 2 creators (one for tuxemon and one for trainers) make.tuxemon.org should be a landing page where you can select, if you want to create a tuxemon or a trainer...

edit:
a good addition for the future would be battle sprites for the trainers which are generated along with the spritesheet.. selecting a hat for the overworld sprite should update the in-battle sprite as well.

Last edited by tamashihoshi (31 Jan 2017 11:46)


Avatar

By tamashihoshi 1 Feb 2017 10:24

Champion · 261 comments

new version:
https://drive.google.com/open?id=0B3jcv … HJUS0RRc0k

naming of the sprites:
partname_type_variation
example:
hat_1_2

this would mean:
this sprite is a hat, it is the first type of a hat (a cap as an example) and the second variation (color is blue instead of yellow)

also I fixed some mistakes in the code + use switch-case instead of that crappy if-else-monster

----
changes:
- different sprite names
- css reset
- minimal css changes
- fixed missing semicolons
- switch-case instead of if-else
- all sprites lori provided are in the tool now


Avatar

By Sanglorian 1 Feb 2017 11:31

Champion · 550 comments

Looking great, tamashihoshi! And such fast work too

Avatar

By ShadowApex 2 Feb 2017 20:20

Lead Developer · 374 comments

Looks awesome tamashi!

All of the code for make.tuxemon.org is on GitHub here: https://github.com/Tuxemon/Tuxemon-MonsterMaker

You could fork that project on GitHub and try adding your character making pages. The current Monster Maker is written in Node.js (which is javascript based). You'd just need to do these steps to add your character maker:

  • Drop your HTML pages in monstermaker/views/pages/ as a .ejs file.
  • Drop your css, sprites, and js files in monstermaker/public in the appropriate folder.
  • Add a router.get('/characters', function(req, res, next) { res.render('pages/characters') } line in monstermaker/routes/index.js so your page can be accessed at "make.tuxemon.org/characters"


Avatar

By tamashihoshi 12 Mar 2017 10:41

Champion · 261 comments

I tried to add the charmaker! Hope it works yikes

Also, there is something we should probably add (some day):

When selecting a spritesheet layer, you get no information about it. Before, you had the name... who sprited the layer? where does it come from? what purpose does it have?
But nothing too complicated.

probably something like this:
i2vuW3T.png


Avatar

By MirceaKitsune 2 Feb 2020 15:03

Member · 45 comments

First of all, very good idea and initiative! As I'm playing with editing character sprites for my own mod, I'm planning to use this to create custom NPC's. Only problem was that splitting the sprite set into character sprites manually would be a laborious process. Thus I adapted my version of the sprite merge / split shell script to extract each frame in the exact order seen in the default sprites (eg: red). Let me know if you find this useful!

#!/bin/bash 

convert -crop 16x32 ${1}.png -background "#ffffff00" ${1}_%02d.png

cp ${1}_00.png ${1}_back.png
cp ${1}_04.png ${1}_front.png
cp ${1}_08.png ${1}_right.png
cp ${1}_13.png ${1}_left.png

mv ${1}_00.png ${1}_back_walk.003.png
mv ${1}_01.png ${1}_back_walk.002.png
mv ${1}_02.png ${1}_back_walk.001.png
mv ${1}_03.png ${1}_back_walk.000.png
mv ${1}_04.png ${1}_front_walk.003.png
mv ${1}_05.png ${1}_front_walk.002.png
mv ${1}_06.png ${1}_front_walk.001.png
mv ${1}_07.png ${1}_front_walk.000.png
mv ${1}_08.png ${1}_right_walk.003.png
mv ${1}_09.png ${1}_right_walk.002.png
mv ${1}_10.png ${1}_right_walk.001.png
mv ${1}_11.png ${1}_right_walk.000.png
mv ${1}_12.png ${1}_left_walk.002.png
mv ${1}_13.png ${1}_left_walk.003.png
mv ${1}_14.png ${1}_left_walk.000.png
mv ${1}_15.png ${1}_left_walk.001.png
Avatar

By Asmanel 9 Mar 2020 03:05

New member · 6 comments

Sorry for replying so lately.

I think keeping the characters split the way they are is a bad idea for two memory related reasons.

The first is related to the way files systems works, how files are stored on on the disk (even if, today, it's far from being always literally a disk).

Most of the file systems divide disks in sections named clusters. Each cluster of a same disk have the same size and if a file can be, if needed, split in several clusters (the way it is handled depend on the file system), a same cluster can't be shared by several files (any file starts at the beginning of the cluster it starts). This make a lot of little files tends to use more disk space than in the same amount of data in bigger files

Example : on a disk that have 4kb clusters, there are 100 little files. Their average size is 512 bytes. The sum of their sizes is 50kb but they take at least 400kb on the disk.

The second is related to the structures of png files. Beside its signature. all of a png file is made of sections named chunks. In any valid png file, the first chunk is an IDHR one and the last is an IEND one, both unique and fixed sized. A variable sized IDAT chunks is also required, always. Other chunk types exist, but all of them are optional.

Having 20 little files per character meant as many copies of the signature and these three chunks while one bigger file will have only one each. If the average ratio bits/pixels (in the data part of the IDAT chunk) isn't too far from the current one, there will be a significant difference between the size of this bigger file and the sum of the sizes of the files it binds.

These two reasons are why I think store characters the way are now stored is a bad idea. Put in a same file all of the images of a character (or a group of related characters) is a better idea, making the game lighter.

Avatar

By xirsoi 11 Mar 2020 12:51

Champion · 91 comments

I agree, I've always been a bit confused by Tuxemon's strategy of having each frame in a separate file. The standard is to use sprite sheets to save disk space and memory.

Alternatively, a build script could package files up in a more efficient way. But I think sprite sheets would be better, personally.


Avatar

By tamashihoshi 30 Apr 2020 11:31

Champion · 261 comments

Heya o/
I'm glad to see a few comments here big_smile I'm currently learning a little bit of JS now. I think I'm gonna recode my original attempt, clean up the code.
So do you guys think saving the generated trainer-sprites as single/seperated sprites is a useful feature? Or should it stay as a spritesheet, the way it is now?


Avatar

By Sanglorian 4 May 2020 01:10

Champion · 550 comments

Hey tamashihoshi -- my preference is for a spritesheet; it's easier to convert to GIF for the wiki.

Avatar

By xirsoi 4 May 2020 15:36

Champion · 91 comments

That question gives me an idea; when the character builder feature is eventually written into the game it could/should cache the result as a "compiled" image stored with the save file.