Jump to content

Welcome to Obsidian Forum Community
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!
Photo

[Tutorial] Adding New Icons (v2.0.0+)

tutorial

  • Please log in to reply
25 replies to this topic

#1
BMac

BMac

    Programmer

  • Developers
  • 410 posts
  • Lords of the Eastern Reach Backer

You should be familiar with the Modding Basic Concepts tutorial before following this one.

 
In this tutorial, I'm going to show you how to add a new icon for a custom ability or item in Pillars of Eternity II: Deadfire. You must have Deadfire version 2.0.0 or later to use this functionality.
 
I've already created game data objects for two custom items, and I've created two PNG icons for each: a small 42x42 icon, which will be used to show the item in an inventory slot, and a large 100x100 icon, which will be used to show the item when it's being dragged, and in the detailed inspection window.  Items require both icons, but abilities only need the small 42x42 icon.
 
To allow the game to load my large icon, all I have to do is put it in my mod folder at "<my_mod>/gui/icons/items".  I can then reference it in the IconTextureLarge property of my item's game data.

post-113185-0-37461300-1532558362.png

post-113185-0-81443800-1532558653.png
 
Small icons work a little differently. They need to be packed into an atlas, which is a single image file that has multiple images in it. The free tool SpriteSheetPacker can build an atlas for you from your collection of small icon images.
 
Download SpriteSheetPacker and run it.  Select "Add Images" and find all the small icon images you want to include in your mod.
 
Click the "..." next to "Output Image".  Browse to your mod folder.  Create a new folder in it called "atlases".  In this folder, save the image as "ItemIcons.png". If you were adding abilities, the icons for those would need to be in a separate atlas, also in this folder, called "SpellAbilityIcons.png".

 

Ensure "Generate Map?" is enabled.

post-113185-0-58331000-1532558365.png
 
Now click "Build Sprite Sheet".  This will create the atlas image, and also a file called "ItemIcons.txt", which tells the game about each separate icon in the atlas.
 
Finally, I can add a reference to the small icon in the IconTextureSmall property of my item's game data.  Because the icon is in an atlas, this only needs the name of the sprite. It doesn't need any directory information.

post-113185-0-33373000-1532558355.png
 
That's it.  My new item now has custom icons to use in-game.
 
post-113185-0-35917500-1532558359.png

Attached Files


  • tonpix, mammasaura , Ethics Gradient and 4 others like this

#2
tonpix

tonpix

    (2) Evoker

  • Members
  • 62 posts
  • Pillars of Eternity Backer
  • Kickstarter Backer
  • Deadfire Backer
  • Fig Backer

Very nice, it's simple to do small icons :)



#3
kilay

kilay

    (5) Thaumaturgist

  • Members
  • 524 posts

Really thnks :dancing:



#4
Armakoir

Armakoir

    (3) Conjurer

  • Members
  • 115 posts
  • Steam:Armakoir

All hail the Penguin Sword of Red X Removal!

 

o7



#5
Kexby

Kexby

    (2) Evoker

  • Members
  • 72 posts
  • Location:Australia

Yes! More tutorials. This is what we need.

 

Thank you BMac :biggrin: .



#6
peardox

peardox

    (5) Thaumaturgist

  • Members
  • 564 posts
  • Location:Manchester, UK
  • Deadfire Backer

Sticky this one



#7
peardox

peardox

    (5) Thaumaturgist

  • Members
  • 564 posts
  • Location:Manchester, UK
  • Deadfire Backer

If I read this correctly I can build a spritesheet and animate it?

 

This is inferred so lets imagine I've got a 256x256 cell spritesheet with 32 frames

 

Would this animate?

 

Don't imagine - I've got exactly that sheet

 

I can't upload as its licensed art

 

I'll give it a go when 2.0 drops then find a freebie to sheet



#8
zilbest

zilbest

    (2) Evoker

  • Members
  • 54 posts
Thank you so much for the tutorial! Hoping more tutorials to come...

#9
tonpix

tonpix

    (2) Evoker

  • Members
  • 62 posts
  • Pillars of Eternity Backer
  • Kickstarter Backer
  • Deadfire Backer
  • Fig Backer

@Bmac, is 4k required? If yes, would you consider allowing us to use smaller resolutions to avoid wasting empty space/memory?

 

Also, important question for me - is it possible to create atlas that can be used by multiple mods, separated in folders? Could be a matter of folder structure, for example

 

/override -> tonpix mods -> single icon atlas + folders for different mods, separated in folders?



#10
Armakoir

Armakoir

    (3) Conjurer

  • Members
  • 115 posts
  • Steam:Armakoir
The atlas I created with 6 icons truncated down in size and was 6kb.

Also, I put the atlas in the folder of mod-one and called them from mod-two and they worked.
Seems like you can share an atlas.

Edited by Armakoir, 02 August 2018 - 02:50 AM.

  • kilay likes this

#11
tonpix

tonpix

    (2) Evoker

  • Members
  • 62 posts
  • Pillars of Eternity Backer
  • Kickstarter Backer
  • Deadfire Backer
  • Fig Backer

The atlas I created with 6 icons truncated down in size and was 6kb.

Also, I put the atlas in the folder of mod-one and called them from mod-two and they worked.
Seems like you can share an atlas.

 

Ah, you told me on slack, sorry I forgot about it. Truncated means what?



#12
Armakoir

Armakoir

    (3) Conjurer

  • Members
  • 115 posts
  • Steam:Armakoir
The atlas was only as big as the six icons I added and the total size was 160x80 (or something). There was no extra blank space.
  • tonpix likes this

#13
BMac

BMac

    Programmer

  • Developers
  • 410 posts
  • Lords of the Eastern Reach Backer

Sticky this one

I've linked it in the Useful Information sticky - just trying (perhaps overzealously) to avoid a ballooning sticky section

 

If I read this correctly I can build a spritesheet and animate it?

 

This is inferred so lets imagine I've got a 256x256 cell spritesheet with 32 frames

 

Would this animate?

No, we don't support animating these icons. We'll only use the single image specified in IconTextureSmall.

 

@Bmac, is 4k required? If yes, would you consider allowing us to use smaller resolutions to avoid wasting empty space/memory?

The 4k value is a maximum.  The atlas that's produced by SpriteSheetPacker will only be as big as it needs to be, as noted by Armakoir.

 

Also, important question for me - is it possible to create atlas that can be used by multiple mods, separated in folders? Could be a matter of folder structure, for example

Yes, you can use icons from other mod folders.  You'll have to make sure the user installs both mods, of course.


  • kilay and Spherical like this

#14
Spherical

Spherical

    (1) Prestidigitator

  • Members
  • 48 posts

Using the technique described in #1 is it possible to create icons that can be referenced in .stringtable files using the <sprite> element or is it limited to item/ability icons for now?

 

Edit: Using the Inline atlas (found in the game files) as a template didn't work - i.e. naming the new atlas Inline.png/Inline.txt - so I'm guessing it's not supported at the moment. :(


Edited by Spherical, 03 August 2018 - 05:37 AM.

  • kilay likes this

#15
BMac

BMac

    Programmer

  • Developers
  • 410 posts
  • Lords of the Eastern Reach Backer

Using the technique described in #1 is it possible to create icons that can be referenced in .stringtable files using the <sprite> element or is it limited to item/ability icons for now?

 

Edit: Using the Inline atlas (found in the game files) as a template didn't work - i.e. naming the new atlas Inline.png/Inline.txt - so I'm guessing it's not supported at the moment. :(

Right, unfortunately the inline atlas needs to be packed via a different system (TextMesh Pro) that doesn't support dynamic loading at the moment.



#16
Spherical

Spherical

    (1) Prestidigitator

  • Members
  • 48 posts

...at the moment.

 

https://youtu.be/nFTRwD85AQ4?t=21

 

Thanks for the quick reply BMac! I'll keep my fingers crossed it might be possible to add new icons in the future :)


Edited by Spherical, 03 August 2018 - 09:58 AM.

  • tonpix and kilay like this

#17
peardox

peardox

    (5) Thaumaturgist

  • Members
  • 564 posts
  • Location:Manchester, UK
  • Deadfire Backer

This needs a sticky!


  • Spherical likes this

#18
Spherical

Spherical

    (1) Prestidigitator

  • Members
  • 48 posts

This need a sticky, please.



#19
Spherical

Spherical

    (1) Prestidigitator

  • Members
  • 48 posts

Right, unfortunately the inline atlas needs to be packed via a different system (TextMesh Pro) that doesn't support dynamic loading at the moment.

 

 

A follow up question: would it maybe possible to add a few new icons then? Simple shapes would be nice but just having all available icons in black and white would go a long way. It shouldn't take too long to do, right?



#20
peardox

peardox

    (5) Thaumaturgist

  • Members
  • 564 posts
  • Location:Manchester, UK
  • Deadfire Backer

Sprite Sheets (they're dead easy)

 

OK - explaining this is NOT easy :(

 

Just tried...

Right

 

See https://apuzzle.net/

 

This shows a dynamic sheet - it's something I have in alpha. This WON'T work on mobile - you need a mouse as it's Drag + Drop

 

Solve the jigsaw!

 

All puzzles involve one big image I split into portions - switch difficultly to make it hard (anything above Easy is hard actually)

 

Note that this is an Alpha - i.e. buggy.

 

That's a SpriteSheet in action...

 

I will do a spite sheet tutorial once I've finished my current obligations

 

Don't worry - I'll make it easy. You won't be able to do what I do with dynamic (complex math) but you'll understand how things work

Someone remind me...


Edited by peardox, 10 August 2018 - 04:37 PM.






Also tagged with one or more of these keywords: tutorial

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users