Modding:Content Tutorial Simple Item: Difference between revisions

From Vintage Story Wiki
Marked this version for translation
m (minor formatting again)
(Marked this version for translation)
 
Line 1: Line 1:
<languages/>
<languages/>
<translate>
<translate>
<!--T:1-->
{{GameVersion|1.19.4}}
{{GameVersion|1.19.4}}
__FORCETOC__
__FORCETOC__


== Introduction ==
== Introduction == <!--T:2-->


=== Objective ===
=== Objective === <!--T:3-->
In this tutorial, you will create an item - A simple wand! Although this item will have no real functionality, it will demonstrate how to create assets in json, as well as how to use shapes, textures, and lang files.
In this tutorial, you will create an item - A simple wand! Although this item will have no real functionality, it will demonstrate how to create assets in json, as well as how to use shapes, textures, and lang files.


=== Assets ===
=== Assets === <!--T:4-->
Before starting, it is recommended you [https://github.com/Nateonus/vsmodexamples/releases/tag/SimpleItemTutorial download the workspace and assets] for this tutorial. The completed files can also be found here.  
Before starting, it is recommended you [https://github.com/Nateonus/vsmodexamples/releases/tag/SimpleItemTutorial download the workspace and assets] for this tutorial. The completed files can also be found here.  


<!--T:5-->
This tutorial starts with the following assets:
This tutorial starts with the following assets:


<!--T:6-->
* Mod Setup & Folder Structure
* Mod Setup & Folder Structure
* Empty item file
* Empty item file
Line 20: Line 23:
* Item texture file
* Item texture file


=== Prerequisites ===
=== Prerequisites === <!--T:7-->
This tutorial will assume you understand the following topics:
This tutorial will assume you understand the following topics:


<!--T:8-->
* [[Modding:Developing a Content Mod|Setting up a content mod and using an IDE.]]
* [[Modding:Developing a Content Mod|Setting up a content mod and using an IDE.]]
* [[Modding:Content Tutorial Basics|The functions of shape, texture and lang files.]]
* [[Modding:Content Tutorial Basics|The functions of shape, texture and lang files.]]


== Navigating Assets ==
== Navigating Assets == <!--T:9-->
Using the downloaded workspace, have a look at the files that currently exist.
Using the downloaded workspace, have a look at the files that currently exist.


<!--T:10-->
* ''modinfo.json'' - The mod info file, which registers your mod with the ID 'simpleitem'.
* ''modinfo.json'' - The mod info file, which registers your mod with the ID 'simpleitem'.
* ''modicon.png'' - The mod icon file, which will be displayed on the mod manager menu.
* ''modicon.png'' - The mod icon file, which will be displayed on the mod manager menu.
Line 36: Line 41:
* ''assets/simpleitem/textures/item/simplewand.png'' - A texture file for the wand.
* ''assets/simpleitem/textures/item/simplewand.png'' - A texture file for the wand.


== Creating the Item ==
== Creating the Item == <!--T:11-->
In order to create an item, a file must be created inside the ''itemtypes'' folder. If using the provided workspace, there already exists an item file called simplewand. Open this file in your IDE.
In order to create an item, a file must be created inside the ''itemtypes'' folder. If using the provided workspace, there already exists an item file called simplewand. Open this file in your IDE.


<!--T:12-->
The most important property when creating an asset is the code, also known as an ID. To begin, copy and paste this into the opened simplewand file.<syntaxhighlight lang="json">
The most important property when creating an asset is the code, also known as an ID. To begin, copy and paste this into the opened simplewand file.<syntaxhighlight lang="json">
{
{
Line 45: Line 51:
</syntaxhighlight>Remember that json files are a set of keys to values. The key, in this example, is "''code''", and the value is "''simplewand''". Note that the item file starts and ends in curly brackets ('''{ }'''), meaning it is a single object.
</syntaxhighlight>Remember that json files are a set of keys to values. The key, in this example, is "''code''", and the value is "''simplewand''". Note that the item file starts and ends in curly brackets ('''{ }'''), meaning it is a single object.


<!--T:13-->
Now that your itemtype file has a code, it will now be created and registered in game. However, you need a way of accessing the item. To do this, add a new property:<syntaxhighlight lang="json">
Now that your itemtype file has a code, it will now be created and registered in game. However, you need a way of accessing the item. To do this, add a new property:<syntaxhighlight lang="json">
{
{
Line 54: Line 61:
</syntaxhighlight>Notice that each property is seperated using a comma. The new property, ''"creativeinventory"'' tells the game what creative tab this item will be placed in. The syntax of this particular property is a little bit more complex, but don't worry about it for now. All this does is add the item into the "general" creative tab.
</syntaxhighlight>Notice that each property is seperated using a comma. The new property, ''"creativeinventory"'' tells the game what creative tab this item will be placed in. The syntax of this particular property is a little bit more complex, but don't worry about it for now. All this does is add the item into the "general" creative tab.


<!--T:14-->
If you were to launch Vintage Story and enable your mod, you will see the item in the creative menu!  
If you were to launch Vintage Story and enable your mod, you will see the item in the creative menu!  


<!--T:15-->
[[File:Content Tutorial Simple Item No Texture Or Shape.png|frameless]]
[[File:Content Tutorial Simple Item No Texture Or Shape.png|frameless]]


<!--T:16-->
Ideally, you do not want your item to be a large black box.
Ideally, you do not want your item to be a large black box.


== Adding the Shape & Texture ==
== Adding the Shape & Texture == <!--T:17-->
The shape and texture files exist in the assets, so why isn't the item being [[wikipedia:Software_rendering|rendered]] correctly?
The shape and texture files exist in the assets, so why isn't the item being [[wikipedia:Software_rendering|rendered]] correctly?


<!--T:18-->
If an asset wishes to use a certain shape or texture, then it must specify this within its json file. Replace your current itemtype json with the following:<syntaxhighlight lang="json">
If an asset wishes to use a certain shape or texture, then it must specify this within its json file. Replace your current itemtype json with the following:<syntaxhighlight lang="json">
{
{
Line 78: Line 89:
</syntaxhighlight>Two new properties have been added - ''texture'' and ''shape.'' Remember that the shape is a 3D representation of our item, and the texture is a 2D image that is mapped onto our shape, and we should include both to ensure our item is rendered correctly. It may seem confusing that both the texture and shape values appear to be the same, but the game looks for these in different places. To find shapes, the game automatically looks in the mod's ''shapes'' folder, whereas for textures it looks in the mod's ''textures'' folder.  
</syntaxhighlight>Two new properties have been added - ''texture'' and ''shape.'' Remember that the shape is a 3D representation of our item, and the texture is a 2D image that is mapped onto our shape, and we should include both to ensure our item is rendered correctly. It may seem confusing that both the texture and shape values appear to be the same, but the game looks for these in different places. To find shapes, the game automatically looks in the mod's ''shapes'' folder, whereas for textures it looks in the mod's ''textures'' folder.  


<!--T:19-->
If you run the game again, you'll notice some changes.
If you run the game again, you'll notice some changes.


<!--T:20-->
[[File:SimpleItemTutorialWandNoPositioning.png|frameless]]
[[File:SimpleItemTutorialWandNoPositioning.png|frameless]]


<!--T:21-->
Now, that certainly looks closer to what we wanted, but the position of the item is wrong.
Now, that certainly looks closer to what we wanted, but the position of the item is wrong.


== Positioning the Item ==
== Positioning the Item == <!--T:22-->
Your item is nearly complete, however the 3d object does not have the correct transformation. A transformation, in 3d graphics, refers to an object's position, rotation, and scale.  
Your item is nearly complete, however the 3d object does not have the correct transformation. A transformation, in 3d graphics, refers to an object's position, rotation, and scale.  


=== Using the Transform Editor ===
=== Using the Transform Editor === <!--T:23-->
To allow modders to easily position items and blocks correctly, Vintage Story utilises a transform editor that can be accessed in game. When in game, hold the item you wish to position and use the command ''<nowiki/>'.tfedit' to open the transform editor.''
To allow modders to easily position items and blocks correctly, Vintage Story utilises a transform editor that can be accessed in game. When in game, hold the item you wish to position and use the command ''<nowiki/>'.tfedit' to open the transform editor.''


<!--T:24-->
The transform editor allows you to select where the object is rendered, and adjust its transformation directly. The best part about this is the generated json code at the bottom of this editor, which you can copy and paste straight into your item file.
The transform editor allows you to select where the object is rendered, and adjust its transformation directly. The best part about this is the generated json code at the bottom of this editor, which you can copy and paste straight into your item file.


<!--T:25-->
It is recommend to learn how to use the transform editor, since it is an invaluable tool for transforming items and blocks.
It is recommend to learn how to use the transform editor, since it is an invaluable tool for transforming items and blocks.


<!--T:26-->
Changes made within the transform editor do not modify any files, and will therefore not save. For each item you create, it is recommended to set positions for ground, main hand, and gui. These use the properties ''groundTransform'', ''tpHandTransform,'' and ''guiTransform'' respectively.
Changes made within the transform editor do not modify any files, and will therefore not save. For each item you create, it is recommended to set positions for ground, main hand, and gui. These use the properties ''groundTransform'', ''tpHandTransform,'' and ''guiTransform'' respectively.


<!--T:27-->
To transform your wand correctly, add the following properties. Don't forget to add a comma after the final curly bracket on the previous shape element.<syntaxhighlight lang="json">
To transform your wand correctly, add the following properties. Don't forget to add a comma after the final curly bracket on the previous shape element.<syntaxhighlight lang="json">
"guiTransform": {
"guiTransform": {
Line 153: Line 171:
</syntaxhighlight>To see if the changes are correct, you can simply reload the world. Hopefully, if everything worked correctly, you should find that your wand now fits better in the player's hand, as well as appearing in the gui more appropriately.
</syntaxhighlight>To see if the changes are correct, you can simply reload the world. Hopefully, if everything worked correctly, you should find that your wand now fits better in the player's hand, as well as appearing in the gui more appropriately.


<!--T:28-->
[[File:SimpleItemContentTutorialItemPositionButNoName.png|frameless]]
[[File:SimpleItemContentTutorialItemPositionButNoName.png|frameless]]


<!--T:29-->
There is one final change before the item is complete.
There is one final change before the item is complete.


== Renaming the Item ==
== Renaming the Item == <!--T:30-->
Currently, every instance of the item is called ''<nowiki/>'simpleitem:item-simplewand'.'' To fix this, you need to add an entry to the lang file. Open up the provided ''en.json'' language file, found in ''assets/simpleitem/lang.''  
Currently, every instance of the item is called ''<nowiki/>'simpleitem:item-simplewand'.'' To fix this, you need to add an entry to the lang file. Open up the provided ''en.json'' language file, found in ''assets/simpleitem/lang.''  


<!--T:31-->
This sample lang file contains two premade translations, to show you how the file works. <syntaxhighlight lang="json">
This sample lang file contains two premade translations, to show you how the file works. <syntaxhighlight lang="json">
{
{
Line 173: Line 194:
</syntaxhighlight>Both sample translations are not used, and can be deleted if you want to.
</syntaxhighlight>Both sample translations are not used, and can be deleted if you want to.


<!--T:32-->
To speed up testing, if you still have Vintage Story open, you can use the command '<nowiki/>''.reload lang''' to reload all lang files. Hovering over your item should show that our lang file has taken effect.
To speed up testing, if you still have Vintage Story open, you can use the command '<nowiki/>''.reload lang''' to reload all lang files. Hovering over your item should show that our lang file has taken effect.


<!--T:33-->
[[File:SimpleItemTutorialFinalImageWorking.png|frameless]]
[[File:SimpleItemTutorialFinalImageWorking.png|frameless]]


== Conclusion ==
== Conclusion == <!--T:34-->
Congratulations, you have now created your first item! This tutorial should have given you some understanding of items, textures, shapes and language files, as well as the basics of modding for Vintage Story!  
Congratulations, you have now created your first item! This tutorial should have given you some understanding of items, textures, shapes and language files, as well as the basics of modding for Vintage Story!  


=== Next Steps... ===
=== Next Steps... === <!--T:35-->
If you want to test your knowledge, consider doing the tasks under the ''Going Further'' section below.
If you want to test your knowledge, consider doing the tasks under the ''Going Further'' section below.


<!--T:36-->
When you're ready, try out the next tutorial: [[Modding:Content Tutorial Simple Block|Simple Block]]. This will show you how to create a new block with a texture.
When you're ready, try out the next tutorial: [[Modding:Content Tutorial Simple Block|Simple Block]]. This will show you how to create a new block with a texture.


== Going Further ==
== Going Further == <!--T:37-->
Want to make some additional changes to this mod? Try and achieve the following things!
Want to make some additional changes to this mod? Try and achieve the following things!


<!--T:38-->
Change the color of the wand
Change the color of the wand
{| class="wikitable mw-collapsible mw-collapsed"
{| class="wikitable mw-collapsible mw-collapsed"
Line 213: Line 238:
|}
|}


<!--T:39-->
{{Navbox/contentmodding}}
{{Navbox/contentmodding}}
</translate>
</translate>
Confirmedusers
536

edits