Build Your Own Protagonist

Avatar

By Sanglorian 26 Jan 2017 22:35

Champion · 501 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 · 251 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.


We'll meet again, don't know where, don't know when. But I know we'll meet again some sunny day!

Avatar

By Sanglorian 30 Jan 2017 05:51

Champion · 501 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 · 251 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)


We'll meet again, don't know where, don't know when. But I know we'll meet again some sunny day!

Avatar

By tamashihoshi 31 Jan 2017 11:38

Champion · 251 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...


We'll meet again, don't know where, don't know when. But I know we'll meet again some sunny day!

Avatar

By tamashihoshi 31 Jan 2017 11:45

Champion · 251 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)


We'll meet again, don't know where, don't know when. But I know we'll meet again some sunny day!

Avatar

By tamashihoshi 1 Feb 2017 10:24

Champion · 251 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


We'll meet again, don't know where, don't know when. But I know we'll meet again some sunny day!

Avatar

By Sanglorian 1 Feb 2017 11:31

Champion · 501 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 · 251 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


We'll meet again, don't know where, don't know when. But I know we'll meet again some sunny day!