Your own Gfx - maybe no problem

Place to get help with not working mods / modding interface.
Post Reply
YuokiTani
Smart Inserter
Smart Inserter
Posts: 1037
Joined: Thu May 08, 2014 7:57 pm
Contact:

Your own Gfx - maybe no problem

Post 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
Last edited by YuokiTani on Wed Jun 04, 2014 6:48 pm, edited 7 times in total.

User avatar
FreeER
Smart Inserter
Smart Inserter
Posts: 1266
Joined: Mon Feb 18, 2013 4:26 am
Contact:

Re: Your own Gfx - maybe no problem

Post 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 ;)

YuokiTani
Smart Inserter
Smart Inserter
Posts: 1037
Joined: Thu May 08, 2014 7:57 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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 ^^
Last edited by YuokiTani on Sat May 31, 2014 9:45 pm, edited 1 time in total.

Rensiur
Long Handed Inserter
Long Handed Inserter
Posts: 56
Joined: Sat May 17, 2014 2:41 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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.

YuokiTani
Smart Inserter
Smart Inserter
Posts: 1037
Joined: Thu May 08, 2014 7:57 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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
Last edited by YuokiTani on Sun Jun 01, 2014 8:07 am, edited 5 times in total.

YuokiTani
Smart Inserter
Smart Inserter
Posts: 1037
Joined: Thu May 08, 2014 7:57 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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

drs9999
Filter Inserter
Filter Inserter
Posts: 831
Joined: Wed Mar 06, 2013 11:16 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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.

YuokiTani
Smart Inserter
Smart Inserter
Posts: 1037
Joined: Thu May 08, 2014 7:57 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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

YuokiTani
Smart Inserter
Smart Inserter
Posts: 1037
Joined: Thu May 08, 2014 7:57 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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

domtronvox
Burner Inserter
Burner Inserter
Posts: 7
Joined: Wed May 21, 2014 6:55 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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.

JamesOFarrell
Filter Inserter
Filter Inserter
Posts: 402
Joined: Fri May 23, 2014 8:54 am
Contact:

Re: Your own Gfx - maybe no problem

Post 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.

YuokiTani
Smart Inserter
Smart Inserter
Posts: 1037
Joined: Thu May 08, 2014 7:57 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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.

JamesOFarrell
Filter Inserter
Filter Inserter
Posts: 402
Joined: Fri May 23, 2014 8:54 am
Contact:

Re: Your own Gfx - maybe no problem

Post 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

Colombo
Long Handed Inserter
Long Handed Inserter
Posts: 76
Joined: Mon May 19, 2014 11:25 am
Contact:

Re: Your own Gfx - maybe no problem

Post by Colombo »

Hello, could you make tutorial for graphics in gimp?

YuokiTani
Smart Inserter
Smart Inserter
Posts: 1037
Joined: Thu May 08, 2014 7:57 pm
Contact:

Re: Your own Gfx - maybe no problem

Post 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

Post Reply

Return to “Modding help”