World of Banished

MODS Garage => Tutorials => Topic started by: RedKetchup on May 20, 2016, 10:09:54 PM

Title: How to make a semi-transparent texture for Banished
Post by: RedKetchup on May 20, 2016, 10:09:54 PM
My example has been made with Photoshop

first i did a .png with a sized accepted with the game , e.g. 32,64,128,256,512,1024....
(512x128 pixels)

i ve took here the text tool and i written " Hollywood" (you can paste any copy of plants, flowers, or ect if you want)
as you can see in screenshot 1 there is no background. if you copy pasted some flowers, you can select and delete all the unwanted background pixels till you only get the leaves you want.

sorry if my photoshop is in french version...
screenshot 2 shows you : you go click on "layers" (named "couches" in my french version)

and click "create a layer" (named "creer une couche" in french) in the icons at bottom right of the screen (screenshot 2)

you will see appear a new layer named Alpha 1 (screenshot 3)

then you go in the "calc" TAB and you control + click on the little square representing your original 
and some selection draws will appear on your alpha1 layer (screenshot 4)

you need to take the pencil and white color and "paint" everything in white. if your "selection draws" are made ok, you should only paint in white the zones you really need (here "hollywood" but if you pasted some flowers, you should only see your flowers in white) (screenshot 5)

then only left to save it . in screenshot 6 you see a french version of the menu , you will pick up "Save for web...." (screenshot 6)

and then select PNG-24 and check the "transparency box"
and click save at the bottom of the window and give it a name.png (screenshot 7)

and then your .png is ready for be imported in Banished and will be compatible
Title: Re: How to make a semi-transparent texture for Banished
Post by: RedKetchup on May 20, 2016, 10:25:44 PM
here an example with maple leaves branch.

the image has been put in banished sized format 512x256 pixels.
deleted all unwanted backgrounds to keep only the leaves and the branch.

i added an Alpha 1 layer, i control-click the original and then i gone paint it in white.

and i saved it in Web formal png-24 transparency.
and it is ready to be used in the game.
Title: Re: How to make a semi-transparent texture for Banished
Post by: tanypredator on May 20, 2016, 10:50:50 PM
I use GIMP and do it in more simple way. The Blender exports .png file for texture which already have transparent pixels in all not used places (and placing any picture there doesn't change anything). Then I copy the picture, put it on the appropriate part of mapping and use the highlighted instrument to select all areas around the wanted picture, and press 'Edit -> Delete'. That makes areas around leaves, for example, to become transparent too (at least in GIMP - I still have to test it in game).
Title: Re: How to make a semi-transparent texture for Banished
Post by: RedKetchup on May 20, 2016, 11:08:33 PM
i use GIMP 2.0 too but i use it to do my footprints on the ground :)
pretty both are good :)


so to complete my tutorial, i made a little scene with my 3dsMax :)

i made a big plane and textured it with Hollywood.
and then i ve put many little planes textured with the maple leaves, and i duplicated it to make 8-9 little plants that i ve put in front.

and put it in game :)

Title: Re: How to make a semi-transparent texture for Banished
Post by: RedKetchup on May 20, 2016, 11:20:03 PM
in this example i have 2 semi transparent textures.png called : Hollywood.png and Leaves.png
all both sizes are banished compatible 32,64,128,256,512,1024....
and saved with an Alpha1 layer for the web.

my Hollywood.rsc :
MaterialInstance resource
{
Material _material = "Material\HollywoodMaterial.rsc";
Texture _textures
[
{
String _name = "diffuse";
ImageBuffer _texture = "Models\MaterialInstance\HollywoodTexture.rsc";
}
{
String _name = "snow";
ImageBuffer _texture = "Terrain\TerrainSnowTexture.rsc";
}
]
}

MaterialInstance damage
{
Material _material = "Material\OpaqueSnow\OpaqueSnowDamageMaterial.rsc";
Texture _textures
[
{
String _name = "diffuse";
ImageBuffer _texture = "Models\MaterialInstance\HollywoodTexture.rsc";
}
{
String _name = "damage";
ImageBuffer _texture = "Models\Buildings\DamageTexture.rsc";
}
{
String _name = "snow";
ImageBuffer _texture = "Terrain\TerrainSnowTexture.rsc";
}
]
}


my HollywoodTexture.rsc
ImageBuffer resource : "Texture/ModelAlphaTexture.rsc"
{
String _imageName = "Models\MaterialInstance\Hollywood.png";
}



my Leaves.rsc :
MaterialInstance resource
{
Material _material = "Material\HollywoodMaterial.rsc";
Texture _textures
[
{
String _name = "diffuse";
ImageBuffer _texture = "Models\MaterialInstance\LeavesTexture.rsc";
}
{
String _name = "snow";
ImageBuffer _texture = "Terrain\TerrainSnowTexture.rsc";
}
]
}

MaterialInstance damage
{
Material _material = "Material\OpaqueSnow\OpaqueSnowDamageMaterial.rsc";
Texture _textures
[
{
String _name = "diffuse";
ImageBuffer _texture = "Models\MaterialInstance\LeavesTexture.rsc";
}
{
String _name = "damage";
ImageBuffer _texture = "Models\Buildings\DamageTexture.rsc";
}
{
String _name = "snow";
ImageBuffer _texture = "Terrain\TerrainSnowTexture.rsc";
}
]
}



my LeavesTextures.rsc :
ImageBuffer resource : "Texture/ModelAlphaTexture.rsc"
{
String _imageName = "Models\MaterialInstance\Leaves.png";
}



they all call a copy of cropMaterial.rsc found in the example/crop/material folder that i renamed here for skipping any compatibilities problems with any other mods.
and i called and renamed it : HollywoodMaterial.rsc

my HollywoodMaterial.rsc :
Material resource
{
MaterialType _type = Opaque;
VideoProgram _passes
[
"normal"
"Material\AlphaTest\AlphaTestMaterial.rsc:depth"
"reflect"
]
}

VideoProgram normal
{
VertexLayout _vertexLayout = "MeshLayout\ModelLayout.rsc";
VertexProgram _vertexProgram = "Material\Opaque\OpaqueMaterial.srsl:Normal_vs";
PixelProgram _pixelProgram = "Material\Opaque\OpaqueMaterial.srsl:Normal_psalpha";
RenderState _renderState = "Material\Opaque\OpaqueMaterial.rsc:rsRefNone";
}

VideoProgram reflect
{
VertexLayout _vertexLayout = "MeshLayout\ModelLayout.rsc";
VertexProgram _vertexProgram = "Material\Opaque\OpaqueMaterial.srsl:Normal_vs";
PixelProgram _pixelProgram = "Material\Opaque\OpaqueMaterial.srsl:Normal_psalpha";
RenderState _renderState = "Material\Opaque\OpaqueMaterial.rsc:rsRefNone";
}

Title: Re: How to make a semi-transparent texture for Banished
Post by: RedKetchup on May 20, 2016, 11:26:59 PM
and as you can see , the mesh is totally semi transparent in game :)

(http://worldofbanished.com/gallery/37_20_05_16_11_26_01.jpeg)

the whole Hollywood panel has 2 polygones total (a simple plane with 2 sides)

and each plants at the base of each letters.... have 3x2 = 6 polygons total for each plants. (3 planes of 2 sides each)


*************************

EDIT : i added screenshots to show views from behind.
Title: Re: How to make a semi-transparent texture for Banished
Post by: rkelly17 on May 21, 2016, 09:37:49 AM
Great tutorial. Does this mean you're working on a Hollywood sign mod for banished?  ;D  ;D

Now I can build LA in Banished!  8)
Title: Re: How to make a semi-transparent texture for Banished
Post by: RedKetchup on May 21, 2016, 11:44:35 AM
nan i am working on nothing ^^ still retired/vacations