Page 1 of 1

Your own Gfx - maybe no problem

Posted: Sat May 31, 2014 5:53 pm
by YuokiTani
Okay first, its a fast tutorial no deep explaining - youtube can do this better ;)

what you need - a little bit talent, huge amount of time, a great idea and of course some programs like Blender, Gimp (free) or Cinema4D/Autodesk, Photoshop (very expensive)
for using these programs or how to's please watch some youtube or tutorial-videos.

now we have all this - time for step 2

some thinking about the basics
- factorio is a 2D-Game with fixed isometric-view (important if you use the 3D generation of pics)
- animations are sprite-sheets

why should i use a 3d-raytracing-program such as blender or cinema4d - the anwser is simply - these programs create every view and animation for you.

step 3 - explain my workflow
- i have an idea and so i create some pieces of 3d-objects and move them around until it looks nice
- i tweak light and material until i think thats okay (Stone Crusher http://johnsmith.ktec.de/factorio/mods/ ... 0531-1.jpg)
- i make some testrenders (left 3d-editor - right rendered - http://johnsmith.ktec.de/factorio/mods/ ... 0531-2.jpg)
- i select objects that i want to animate - and set there keyframes
- give my pc some time to render the whole animation - that gives me 10 or more pics (any number what i wanted)
- i put them in Photoshop or Gimp, and patch them in order together (i hate this part, and try some programs to help with this)
i'am found http://draeton.github.io/stitches/ that helps alot to patch the single images together - input must be *.png
- i remove background/alpha and add some shadow, fix outlines or other errors - and save this
- and finally i integrate this sprite-sheet into game

now some additional info
- 3d-programs let you reuse all created stuff, at different angles, any color, or picture size. you can easy create a wallpaper out of your 3d-object
- animation is extrem simple because its parametric
example: you would animate a rotor-blade - set a keyframe with x-rotation=0, now move to last picture maybe 10, and rotate your rotor-blade 330 degree and set a keyframe. the 3d-program automaticly generates all step-rotations, you get a nice spin over every-picture of 33 degree. (330/10 = 33) - gives you an continous animation.
- because factorio is 2D-Game you should fix your 3d-camera in 3d-programm mostly called isometric-view - the settings are different in cinema4d i use an p-angle between -45 to -55°, in blender this should be z-axis and the angle is opposite.
- the correct angle or setting can only tell a dev. - for me the setting that looks nice is right :)
- the in-game shadow not very consitant, they vary but you be right if you set your sun left (NordWest with tendency to West) and high. a longer shadow means sun is low, this make way more work, so i use short shadows :)
- one square in game is 32x32 pixel, to simulate height of an buildung you make this picture bigger in y-axis, maybe 32x48. the game builds the graphics to view from top-down (i think) - so higher buildings at lower y-axis (screen) overlap other graphics. you can tweak the placing of any picture precise in your mod-files.
- max size of animation picture 2048 x 2048 pixel

parametric
- every 3d-object has x,y,z coordinates and axis. for 3d-animation a keyframe stores this parameters. if you move, rotate, size your object and set a new keyframe the new variables are stored. the 3d-program interpolates now the parameters between the keyframes for every frame between the keyframes. you only set your first pic and what you want - last pic (keyframe) - the pics/steps between automaticlly generated.

-parametric means also, you can resize your objects or change their proportions. example: you build a block(x,y,z) 100,50,100 and fit into your image. one hour later and hard work you change your mind, and the block fits no more. instead of creating a new one, you can change the parameter of the block (maybe 150,20,105), by change size or dimension. the block is still at same place, follow the same animation-path, has same color but now new dimensions. in contrast - if you have draw this in 2d you have paint all images new.

views
real-world-view - i think is perspektive
technical - isometric, dimetric, orthographic and so on
- for the game we need a technical-view, because the fixed game camera (other views looks weird)
- with this come some issues, the dimensions in all directions are the same and for first time it feels false and look weird, but there are some benefits.
- the in-game-gfx look at any point same wherever you stand/go and the proportion of any object can you fit into place.

small scale images
- remember at every step our target are pics/animation for game - this limits the max-size of the picture and the information in picture you can share
- you need big objects, high contrast - to see in later in game
- you should only model what you can see - its useless to model an innerview of an house and show later only the outside
- most time you want tweak details in 3d beacuse you want it look right - you spend many time and right you get an perfect result if the image was 1920x1080 - in our target-format your detail is not a pixel -> simple you can't see it.
- concentrate colors, use a 1-2 base colors, and 1 or 2 highlight colors - all colors between generated by light and render-program - see in example as re-post (blue/green base)

links
for blender tutorials or use in youtube blender tutorial, beginner, basic
http://www.blender.org/support/
because ground-functions are all same in 3d-programs you can in youtube look for cinema4d tutorial speedart
some cinema4d quickes https://www.youtube.com/channel/UCGCiEv ... iIeWK7fs4w
he explain in some videos how to make 2d animations https://www.youtube.com/channel/UCHu2KN ... 4hpSW7Yv7Q
maybe https://www.youtube.com/channel/UCKtu_J ... yIy6zK4ZCg if you want to be the next 2d-god ;)
i forgot this source http://cgi.tutsplus.com/

omg - an awful tutorial

please question somewhat to make it better and more informational ^^
i think i have forget some ... (i'am sure ;) )

ps: i use cinema4d because i have access through work - i can't help with Blender, Autodesk, Maja (but youtube) - i spend sometime to learn blender but once cinema4d - forever cinema4d ^^
pps: i demonstrate that wallpaper and 3d means later

Re: Your own Gfx - maybe no problem

Posted: Sat May 31, 2014 6:23 pm
by FreeER
YuokiTani wrote:for using these programs or how to's please watch some youtube or tutorial-videos.
Mind posting some good ones? I've searched a few times and usually ended up with ones that were fairly specific (and half the time thought how would this apply to what I'm trying to do) or pretty 'advanced' and don't explain the concepts behind what they are doing (though the result at the end was amazing it didn't leave me feeling as if I could do it myself) :) Some links to good tutorials would improve this one so people actually know what you're talking about :)
YuokiTani wrote:step 3 - explain my workflow
This seems like the broadest overview of what to do that likely the only people it would help wouldn't need the help ;)
YuokiTani wrote:now some additional info
some of this is probably useful to people that do know the basics, you might add the definition of 'parametric' to the tutorial ;)

Re: Your own Gfx - maybe no problem

Posted: Sat May 31, 2014 6:35 pm
by YuokiTani
3d-objects/art are a complex topic - i'am sorry but i bad with english, so i can't realy teach people who to learn making these graphics.
YuokiTani wrote:step 3 - explain my workflow
This seems like the broadest overview of what to do that likely the only people it would help wouldn't need the help ;)
i would only show that are many steps to get an result - more an overview
sure i can make a tutorial how to use an 3d-program but this is not the right place for it. (many people learn this over years ^^)

i edit my post to share more details,
and i will make tomorrow a simple step by step gfx for something ^^ - and will try use only blender. (but don't expect a blender-tutorial - i'am also a blender noob)
*edit today ^^

Re: Your own Gfx - maybe no problem

Posted: Sat May 31, 2014 8:57 pm
by Rensiur
Still pretty awesome, big thanks for the set of tips.

I think Factorio is a great start for some 3D work (I have no clue myself but will try) because you already can do a fair bit with no-animated things, like your storage bunker or so.

Great example for reuse are your steam turbines, I guess the stone crusher comes from the older big turbine :-) They share some art similarities.

Re: Your own Gfx - maybe no problem

Posted: Sat May 31, 2014 9:32 pm
by YuokiTani
okay between last/edit post and now i made this very fast walk trough. (ca. 1 hour) - all in lovely pics ;)
open pics in new window for full view - some blender menus are right and show up
please read my notes - sometimes i added useful information


first pic - thats the look all we hate - blender starts - no time to explain - lets rush
Image

i try to add some optical stuff and changes
Image
Image
Image

i position the camera object! correct, you can see i use 50° - but all between 40° and 60° looks good
Image

now i fix the perspective of camera - camera-tab itself and change to ortho, you can see the effect
Image

first render - uhuh - ugly - and wrong side shadow - okay ugly because i zoomed in.
Image

for more fun (more pain for me) i choose to add a second light, this gives you more highlighted effect, and the positions are above and left side, you can experiment with different settings
Image

you can see the effect. please change envriroment lightning to 0.02 (i've changed this later to this value) - get off horizon or other crap ^^
Image

next pain in blender ^^ - make colors you wish and apply them correctly - i would be the ball red, and the box green, but i have make some mistake early so i can't them color separeted - i hope you avoid this mistake - but you can see, color, shadow, highlight working
Image

if you have rendered this image you must save it ^^ - not in common menu - way to easy - the save-menu is at bottom-screen - if you get lucky you can auto-save these pics - i have no luck :(
be sure you save png - its easier later
Image

to finish this in under 1 hour, i rotate the center manually 90° -> render ->save -> roatate ->render->save -> roatate ->render->save-> roatate ->render->save ... wow i got now 4 pics for animation ;)
please don't ask for animation-tutorial in blender ! - i will only post a youtube-link :)
Image

yes, we have 4 pics ! - we are a few steps from ending
Image

now its time for stitches - its free (great for us) - this little helper puts all pictures together (imagine you have more than 4) - download as spritesheet
Image

i'am lost now, and the remove of black background + shadows i have done in photoshop - but you can use gimp. (for me only the time now decide this)
Image

and last - integrate your graphic in factorio - you see nearly perfect ;) (whatever it is ^^)
Image

big sorry to blender fans !!! - but it's not my favorite 3d-software - i don't understand some weird gui-concepts from blender

okay you need usually more then 4 pics but there some tricks

heavy tricking to get a result
- image you have a gear with 12 tooth and you would spin this like crazy. how many images you need ?
first intention maybe 12 - to get a 360 degree spin with 30 degree steps -> wrong.
in this case you need only 2, because if you rotate the gear 30 degree the first tooth is in place of second tooth and so on. - in this special case you can't see an animation
this means you can smooth/slow your animation if you add more sub-steps.
- imagine loop-animations need no end-pic thats the same as first pic, because at this point it plays this pic double (end->first) and looks like freeze. okay only a short time.
- use same pics without change to get blinking lamps, or simulate on/off state over some time. some animations you can't control - example: steam-engine their animation-speed depends on flow

Re: Your own Gfx - maybe no problem

Posted: Sat May 31, 2014 9:41 pm
by YuokiTani
Rensiur wrote:Still pretty awesome, big thanks for the set of tips.

I think Factorio is a great start for some 3D work (I have no clue myself but will try) because you already can do a fair bit with no-animated things, like your storage bunker or so.

Great example for reuse are your steam turbines, I guess the stone crusher comes from the older big turbine :-) They share some art similarities.
yes, i reuse every time the envroiment setting (light + material)
and in this case base and gear - other stuff new transformed and modified - but some things always new (chute, drum, animation, some ornamental stuff) - not the big turbine
stone-crusher base comes from heat-form-press :)
but the new power-plant-graphics uses many more parts from small-steam-turbine

of course you need an initial or a pool where you build up - experience helps to get things faster done

Re: Your own Gfx - maybe no problem

Posted: Sat May 31, 2014 9:58 pm
by drs9999
Thanks for the effort to create this!

Just a small correction. This:
YuokiTani wrote:in factorio you can't edit play-speed you can only change the amount of image-frames.
is wrong. You can use the "animation_speed"-property to adjust the animation speed.

Re: Your own Gfx - maybe no problem

Posted: Sat May 31, 2014 10:23 pm
by YuokiTani
drs9999 wrote:Thanks for the effort to create this!

Just a small correction. This:
YuokiTani wrote:in factorio you can't edit play-speed you can only change the amount of image-frames.
is wrong. You can use the "animation_speed"-property to adjust the animation speed.
oh nice to know, i don't know it's at all entity aviable. i correct this in my post

Re: Your own Gfx - maybe no problem

Posted: Sun Jun 01, 2014 10:06 am
by YuokiTani
okay i have no idea what image i want, but i have a 3d-program and i can use it or learn it. texture, colors all complicated stuff - but i want a image.
let's solve this in a few steps

now i'am using cinema4d but i use only standard-forms, i don't edit any edges, surfaces or points not bevel, extrude something - all basic :) - all basic-objects of course rotated, scaled and positioned.

our start-point - yes i've got a cube :) - 1 added 2 lights left, and rotate my camera so i see the bright side, because other side is dark.
Image

i have no concept or idea, so i add some objects to see in which direction it develop
Image

more cylinders, spheres, bock, and arrange a little bit for interesting view - and change the view to ortho (not game-angle) - right the smallest pic is nearly game-size
i've show always the render so you can see shadows and light working for us. there is no material - not yet :)
Image

breaking surfaces trough adding objects who make dark-zones and cast shadows - also looks now more industrial
Image

my final object, i think this will do - next step is coloring, you can use them as it is, by tweaking lights you can generate other colors and effects - but i will color it the old way
Image

4 colors will do ... no 5 ;) - the fifth added later becaue i think it will fit better, but its not nessesary - you see 3(4) gray as base and 1 highlight color
Image

applying colors randomly ;) and i look for a good combination - not bad at this point - the right little pic counts ;)
Image

one benefit form 3d is, you can rotate and render different angles. notice i have only detail this side, because other side you can' t see. but it's easy to mirror this side if nessesary.
Image

here is the dark-gray, and i changed some object-colors - because i can do ;)
Image

and last i rotate in new position for a extra screen and make this tutorial longer ^^ - remember the right tiny pic counts ;)
a bigger preview helps to get details right
looks like an futuristic engine now - in my opinion ;) - with no idea at start i think not bad.
total-time: 1 hour, surely lesser if you make no screenshots and think about steps ;)
Image

Re: Your own Gfx - maybe no problem

Posted: Sat Jun 07, 2014 4:07 pm
by domtronvox
Hay there, glad your making a tutorial. You should see about adding it to the wiki so others can help with polishing it. Then get the page added to the modding resources post.

For anyone wanting to learn blender I highly recomend the Noob to Pro wikibook.
YuokiTani wrote: - give my pc some time to render the whole animation - that gives me 10 or more pics (any number what i wanted)
- i put them in Photoshop or Gimp, and patch them in order together (i hate this part, and try some programs to help with this)
i'am found http://draeton.github.io/stitches/ that helps alot to patch the single images together - input must be *.png
- i remove background/alpha and add some shadow, fix outlines or other errors - and save this
- and finally i integrate this sprite-sheet into game
You can make a sprite sheet in blender without needing an image editing program. I talked about it in this topic https://forums.factorio.com/forum/vie ... =25&t=3707. The script I used is Spritify(description and install instructions here) then you want to animate the camera so it rotates around the 3D object your making the sheet for. Setting the camera rotation animation to linear in the graph window is very important.

Re: Your own Gfx - maybe no problem

Posted: Sat Jun 07, 2014 10:28 pm
by JamesOFarrell
domtronvox wrote:You can make a sprite sheet in blender without needing an image editing program.
You can go one better than this and do the shadows as well. I talk about it in this post, I'll try to do a tutorial at some point.

Re: Your own Gfx - maybe no problem

Posted: Sun Jun 08, 2014 10:34 pm
by YuokiTani
domtronvox wrote: then you want to animate the camera so it rotates around the 3D object your making the sheet for. Setting the camera rotation animation to linear in the graph window is very important.
i think this will flip the shadows, because light-source is in same spot. if i rotate only the object light (sun) cast alyway correct shadow. but i don't know enough about blender to say what is easier or bring better results.

the image-editing is a fast way to get some ground-floor shadow for more depth. i'am relativ sure, that the new radar-animation (radar + radar-shadow) are 2 combined sprite-sheet-layers - but maybe blender can do this in one step.

Re: Your own Gfx - maybe no problem

Posted: Mon Jun 09, 2014 9:35 am
by JamesOFarrell
YuokiTani wrote:but maybe blender can do this in one step.
Read this post if you want to get shadows onto your sprite sheet from blender

Re: Your own Gfx - maybe no problem

Posted: Sat Jul 19, 2014 4:20 pm
by Colombo
Hello, could you make tutorial for graphics in gimp?

Re: Your own Gfx - maybe no problem

Posted: Tue Feb 17, 2015 2:56 pm
by YuokiTani
Colombo wrote:Hello, could you make tutorial for graphics in gimp?
no, i'am not good with gimp and gimp it's not needed. - i demonstrate this in a video-tutorial

Some interests for a tutorial-video from model in cinema4d -> sprite/animation factorio ingame.
it's possible made and showed (music or explained in german) in less then 60 mins.
(workflow from zero to hero ;) )

a 60 min Video-Tutorial with Cinema4D to get a spritesheet and show this ingame.
Youtube