Modding Help Beginner's Guide to XNB Node and Graphics Editing

Discussion in 'Mods' started by cure, Mar 20, 2016.

  1. cure

    cure Big Damn Hero

    Introduction:

    When I first tried to learn how to open .xnb files for their image files I had a lot of trouble finding much help on the subject. So I made this guide for a few people and I thought I'd throw it in a new thread as well.
    The purpose of this guide is to make the process of locating your image files for editing your graphics in-game as simple as possible and contains multiple different methods of accomplishing this task using the wonderful program XNBNode.
    If you have any questions or suggestions feel free to leave a comment. :nuruhappy:


    NOTE REGARDING CURSORS.XNB!: Apparently with version 1.0.6+ of Stardew Valley there's been some issues with the .png in cursors.xnb coming out damaged. Draivin has posted in his profile an updated version of XNB Node which can be found at the following link: XNB Node (0.2.2) by Draivin which supposedly fixes this problem. It is currently an "unpublished" version and I have not tried it myself, so I don't know what all has changed.
    Additionally I've thrown together an updated XNBExtract here but of course, use the new version of XNB Node at your own risk.
    - 3/28/2016


    Important People:
    Superior_s
    Drogean
    Zhuria



    Alternate Method by Drogean: XNBExtract

    So there's an even simpler method effectively replacing Steps 2, 3, and 5 created by Drogean that we've called XNBExtract (Basically a couple batch files, and a Readme) that make the process of unpacking and repacking your .xnb files as simple as possible. Included in the package is XNBNode (0.2.1) by Draivin, so don't worry about downloading that if you choose to use this method.

    While I do still recommend going through the guide for the learning experience if you are unfamiliar with the command prompt. If you just want the quickest way possible this is probably it.

    Lastly, Step 4 concerns ideas for different graphics editing programs and if you're looking for one, I'd still recommend checking it out.

    XNBExtract Link
    (There is also a tiny chance your anti-virus program may have an issue with the .bat files but I can assure you they are harmless and simply contain commands used within this guide.)
    Virus Scan Results


    The Guide:


    Step 1: Acquiring and placing XNBNode

    First off, You'll want to go to this thread:

    Modding Guides and General Modding Discussion--REDUX

    ..and grab XNB Node (0.2.1) By Draivin.
    Direct link: http://www.mediafire.com/download/v4ttswl7tsdaynm/XNBNode.0.2.1.7z

    Then Locate your \Stardew Valley\ Folder. Which odds are is probably either:
    C:\Program Files (x86)\Steam\SteamApps\common\Stardew Valley\ (64bit Windows Users)
    C:\Program Files\Steam\SteamApps\common\Stardew Valley\ (32bit Windows Users)
    or,
    C:\GOG Games\Stardew Valley\

    Next, MAKE SURE YOUR STARDEW VALLEY FOLDER IS BACKED UP! and then unzip and place the contents of the "XNBNode" folder contained within the zipped file, the folder app and the file xnb_node.cmd, inside your Stardew Valley folder.

    If you place the XNBNode folder itself in there like: \Stardew Valley\XNBNode\ You'll have gotten nowhere.


    Step 2: The Command Prompt

    All your .xnb files are located in \Stardew Valley\Content\
    Let's take for example, if we wanted to edit the hair of our Farmer, that file would be \Stardew Valley\Content\Characters\Farmer\hairstyles.xnb

    Now you would want to open a command prompt. On Windows just open the start menu, type cmd in the search bar and hit Enter. Then change directories to your Stardew Valley folder by typing:
    Code:
    cd (your folder location)
    For example I would type:
    Code:
    cd C:\Program Files (x86)\Steam\SteamApps\common\Stardew Valley\
    and hit Enter, leaving me with this:

    [​IMG]

    If your cmd prompt's default path starts in a different drive than the one you store your Stardew Valley folder in, then you need to use the cd/d command as opposed to the cd command.

    Let's say my Stardew Valley folder was in my K:\ Drive. Then I would type:
    Code:
    cd/d K:\Stardew Valley
    Then hit Enter, leaving me with:

    [​IMG]

    Of course, you could also always just take a copy of your cmd.exe and place it in your Stardew Valley folder, open it from there, and it should work just fine. =)


    Step 3: Extracting

    From here you should have a cmd prompt open looking something like:

    [​IMG]

    (Ignore the "Clink" stuff, It's just an unimportant modification I have to my command prompt).


    A great method as suggested by commenters would be to create a folder and place every .xnb you want to edit inside of that folder and extract them all at once, using a command such as:

    Code:
    xnb_node extract (The folder you created with your .xnb files) (The folder you want the resulting files stored in)
    For Example:
    Code:
    xnb_node extract Farmerfiles FarmerfilesUnpacked
    If you just wanted to take ALL of your .xnb files and place them unpacked into a folder so you never have to fool with extracting again, you would simply type:
    Code:
    xnb_node extract Content (The name of the folder you want to place them in, ex. ContentUnpacked)
    Example:
    Code:
    xnb_node extract Content ContentUnpacked
    Big Shoutout to: Superior_S, and Zhuria for this information!!! :)

    From here you will have extracted the .xnb into a .yaml file, and various other files depending on the contents of the .xnb. But.. we're just going to mess around with that .png file :nurutease: Leave the .yaml and other associated files alone. However, because you will need them to repack your .xnb keep all the associated files together in the end after editing your .png. If one is missing, you will have one messed up .xnb :( and we don't want that.


    Now for a single file, I typically just take the one I'm after and copy it into my root Stardew Valley folder so it's in the same place as my xnb_node.cmd and run an extract command.

    So if we were to extract the hairstyles.xnb file the command would be:
    Code:
    xnb_node extract hairstyles.xnb hairstyles.yaml
    (or a .json, hairstyles.yaml, hairstyles.json it doesn't really matter. Though for the purposes of this guide we will just use .yaml. Spoiler though: As far as I know they output the same exact data file with a different extension >.>.)

    Once you're done editing your .png simply type:
    Code:
    xnb_node pack hairstyles.yaml hairstyles.xnb
    Now you should have a new .xnb to place in your Content folder :). If you made any mistakes on it, you can always take a copy of the original from the backup you made previously in the guide and replace it. It is also always a good idea to keep a copy of the extracted files from the .xnb that you are editing so if you need to make any changes, you can come back to it easily and fix them up.

    That should be all folks. If you need any clarification on anything, let me know :nuruwink:.


    Step 4: Editing Your PNG

    Now it's time to edit your .png which will now be located in your \Stardew Valley\(Whatever) folder with your favorite Graphics Editor :).
    (Do not use MS Paint as it cannot create transparency and you will end up with white pixels instead of transparent ones)

    Image Editing Programs:

    Some Image Editors I see commonly used on these forums are:
    GIMP: https://www.gimp.org/downloads/ (Free)
    Not a huge fan of GIMP myself (Has a bit more tools than I ever really need for Stardew Valley PNG editing), but it can be useful and if you don't have Photoshop from what I hear it can accomplish some things that Paint.NET cannot.
    [​IMG]

    Paint.Net: http://www.getpaint.net/index.html (Free)
    Paint.NET I have never used myself. It is supposed to be a slightly simpler option to use as opposed to GIMP and certainly Photoshop while offering many of the same features.
    [​IMG]

    Photoshop: http://www.adobe.com/products/photoshopfamily.html ($$$, But has a limited free trial)
    Now Photoshop I'm sure you've heard of. It is the Major-domo of Image editing software and has as many tools as you would ever need with one hefty price tag to top it off. If you already have it, great! You should learn how to use it. Otherwise, these other options are just fine for editing graphics as simple as Stardew Valley's and cost nothing.
    [​IMG]

    GraphicsGale: https://graphicsgale.com/us/ (Free, With a paid version if you choose)
    Last but not least, my personal choice, GraphicsGale. GraphicsGale was made specifically for editing the kind of pixelized images you will be viewing in Stardew Valley and I find it an excellent and easy to use tool for the purpose of modifying these types of files.
    [​IMG]

    I located GraphicsGale in this article: http://td2tl.com/tutorials/pixel-art-programs/ Which also has various other suggestions of programs for editing images such as these that you may find useful.


    Step 5: Packing Your File

    Now to pack your file. To pack it simply replace extract, with pack in your command. Take the folder you extracted to as your <input> folder and the one you're packing them in as your <output>:
    [​IMG]
    Code:
    xnb_node pack (The folder containing your unpacked files) (The folder you want the packed files stored in)
    Example:
    Code:
    xnb_node pack FarmerfilesUnpacked FarmerfilesPacked
    Finally replace the .xnb in your \Content\ folder (Which should be backed up!), with your edited version, and check your results in-game.



    Additional Info:


    cantorsdust's XNB Node Guide
    Great alternate guide on XNBNode

    Alpha_Omegasis Modding Guide
    An EXTREMELY thorough guide on modding pretty much any element in the game.

    Also, be sure to check out cantorsdust's sticky for any additional information including additional tools and guides, or join the IRC with your favorite client at #stardewvalley-mods on irc.freenode.net or with the following link..

    IRC Link
    (simply type in a unique username, prove you're not a robot, and connect :V)

    _________________________________________________________________________________________________________
    Please feel free to ask any questions, make suggestions, and if you find this thread useful throw a like :nuruflirt:.
     
      Last edited: Mar 29, 2016
    • bitesizedboy

      bitesizedboy Subatomic Cosmonaut

      I'm getting stuck at step 2, I opened the command prompt, and get lost around the "change directories to your Stardew Valley folder" part. My command prompt looks nothing like yours? I type in my folder location, but nothing is coming up
       
      • ConditionOfMan

        ConditionOfMan Intergalactic Tourist

        Can you get a screenshot?
         
        • cure

          cure Big Damn Hero

          Sorry about that =/ I have some small edits to my cmd prompt that show themselves in the text at the top.

          Where is your Stardew Valley folder located?
           
          • Superior_s

            Superior_s Sandwich Man

            Did you hit enter after typing in the directory? What exactly does the command prompt say after you type in the directory?
             
            • Superior_s

              Superior_s Sandwich Man

              I go about this slightly lazier. I rename my content folder content1, make a new content folder and copy and paste the xnb files I want to edit into the new content folder. The you just type cd into the command prompt hit space type my Stardew directory in hit enter then type xnb_node.cmd hit space extract hit space Content hit space ContentUnpacked hit enter. Done. Sorry if this isn't written well.
               
              • bitesizedboy

                bitesizedboy Subatomic Cosmonaut

                I have never done anything like this before and I am very lost
                 

                  Attached Files:

                • cure

                  cure Big Damn Hero

                  So basically once you're in your Stardew Valley folder, theoretically you could unpack your entire Content folder by entering xnb_node.cmd extract Content ContentUnpacked
                  Just tried it, that's good to know.
                   
                    Superior_s likes this.
                  • Superior_s

                    Superior_s Sandwich Man

                    Your actually really close after you get where you are in the image type xnb_node.cmd leave space type extract leave a space then type in the file name or folder that has the xnb's you want to extract leave space then I would type ContentUnpacked and hit enter
                     
                    • Zhuria

                      Zhuria Cosmic Narwhal

                      It's WAY easier to extract and pack folders, and not individual files. When I'm packing, I put the png and yaml in a folder and do xnb_node.cmd pack foldername foldername. Saves a lot of typing :)
                       
                      • Superior_s

                        Superior_s Sandwich Man

                        Yea you can do exactly that. You can do the same thing to repack the files as well just swap the extract with pack and for safety replace the ContentUnpacked with Content Packed in the command prompt.
                         
                        • cure

                          cure Big Damn Hero

                          So if you created a copy of your .xnb and placed it in your Stardew Valley folder, hairstyles.xnb for example the cmd would be:
                          xnb_node extract hairstyles.xnb hairstyles.json
                           
                          • Zhuria

                            Zhuria Cosmic Narwhal

                            This, only the best thing to do is just extract the entire Content folder, then you have access to everything should you ever need it, and you'll never have to unpack anything again!
                             
                              Superior_s and cure like this.
                            • Bybesy

                              Bybesy Tentacle Wrangler

                              Screenshot (2).png and now?
                               
                              • cure

                                cure Big Damn Hero

                                Well by my guide to extract individual files I would then place a copy of the file you want to edit into the Stardew Valley folder, and extract it. But these guys have some great suggestions that I'm going to add to the guide.
                                 
                                • Zhuria

                                  Zhuria Cosmic Narwhal

                                  Keeping in mind not every file has a .json.. The animals all have .yamls and the maps I believe have .tbins. This is why it's easier to just extract or pack folders and not individual files. For beginners it's like apples and oranges IMO. I have all my stuff in an edits folder and then each file has its own folder in there that I pack from
                                   
                                    cure likes this.
                                  • Superior_s

                                    Superior_s Sandwich Man

                                    This is correct the animals and villagers I believe have .yamls and the maps have .tbins.
                                     
                                    • Zhuria

                                      Zhuria Cosmic Narwhal

                                      cure likes this.
                                    • bitesizedboy

                                      bitesizedboy Subatomic Cosmonaut

                                      I keep having an error come up?
                                       

                                        Attached Files:

                                        • ech.PNG
                                          ech.PNG
                                          File size:
                                          35 KB
                                          Views:
                                          152
                                      • Superior_s

                                        Superior_s Sandwich Man

                                        Is the xnb_node.cmd file in the Stardew Valley folder?
                                         

                                        Share This Page