Preparing image assets
As mentioned in the Modder's Guide, you can replace card images/textures using the asset bundle system.
As the game was developed, card art requirements were reshaped as it matured. As a result, cards may have different aspect ratio or sizes, but are mostly a set of specific types.
A card is typically sized internally as an image of size 756x1056. However, this resolution should not be used for the target for card arts. This is just the internal units of the card.
In the end, what matters is having the right aspect ratio or making a characteristic override for a specific card or all cards.
Most cards use a 1:1 aspect ratio which then use an image cutout to place the art in the right spot, and this is how you should target it.
Always consider if you want your card art to fit all use cases, or whether you want it to be used just for one.
For the common uses:
| Use | Requirement | Notes |
|---|---|---|
| Normal card only | Any image size should work, just remember it'll be used in a horizontal aspect ratio | For a 1:1 aspect ratio, the image cutout is typically 0 0.1425 1 0.715 |
| Fullart card or golden | Typically you'll want either a card that already has the right aspect ratio (more details later in the guide), just be aware that the bottom side of the card will be partially obscured by text so you might want to adjust the image cutout | For a 1:1 aspect ratio, the image cutout is typically 0.1425 0 0.715 1 (notice how it basically flips the percentage compared to a standard image) |
| Card back | Typically you'll want a 756x1056 aspect ratio art for this. Card backs typically don't use cutouts | |
| Avatar | Should be a small-sized 1:1 aspect ratio image. Consider the zoom level you need to clearly see the avatar | |
| Playmat | Playmats have a standard size of 2048x1312, but as with the card images, it's not a fixed size |
Guidelines for preparing images
There are some simple formulas for calculating the proper sizes for images for the different kinds of assets.
Typically, we want to limit the size of the images for the art:
| Use | Recommended size | Notes |
|---|---|---|
| Avatar | 512x512 | Smaller sizes are fine |
| Playmat | 2048x1312 | Smaller sizes are fine |
| Card Backs, Normal, Fullart, and Golden cards | a maximum size on both width and height of 1024-2048 | Smaller sizes are fine |
Cards and card backs
You don't need to worry about the art size for 1:1 aspect ratio cards since you can just move the cutout by changing the percentages.
For art you can't get into 1:1 aspect ratio for technical reasons or because it would look bad, there are some simple tricks you can use to adjust the art:
Here is a step-by-step guide for preparing an art asset for different aspect ratios (note: * means multiply, / means divide)
- Use GIMP or any other image editing app that allows you to crop and adjust the crop rectangle. For this sample, we will use GIMP.
- Open the image and enable the Crop tool
- Select the entire image and check the coordinate and size on the tool options section
- First, check if you can easily crop the art to what you need: Multiply the height of the crop by the target width divided by the target height
- Example: If the image is currently 1000x500, we can do (500 * 756 / 1056)
- Check if the result is higher or lower than the original size. In this case, it will be 357.95, or 358, which is lower. If we divide 358 by 500, we get 0.716, which is close enough to what we get from 756/1056 (0.7159090909090909).
- If the result is higher, that means we must swap it around: For example, if the image is 500x1000, we'd multiply the height of the crop by the target height divided by the target width
- Example: 500 * 1056 **/**756 is 698, which when we do 500 / 698 is once again very close to 0.716, which fits what we need.
Additionally, for hero cards, you will need a (hero texture file name)_Field.png file. For example, if you have a hero image MyHero.png, you'll want MyHero_Field.png to point the FIELDCARD card characteristic to.
Playmats
Typically, you can resize your image to a width of 2048 and then crop the image's height to fit the 1312 target. If it's too small, you can crop from the sides untill it works.
Avatars
You just need a 1:1 crop, so it should be pretty simple to do!
Card Art Aspect Ratios
AOF/STD Sets
| Filename | Aspect Ratio/Size | Notes |
|---|---|---|
| ADarkPast.png | 1:1 | |
| AdvarVarlariVanguard.png | 1:1 | |
| AdvisorOfTheTribes.png | 1:1 | |
| Arflamingo.png | 756x1056 | |
| AlKai.png | 1:1 | |
| AntheRingwarden.png | 756x1056 | Anthe (Hero) |
| AntheRingwarden_Field.png | 1:1 | |
| AntheRingwardenRenegade.png | 1:1 | |
| Arfactus_Shade_Of_Birth.png | 756x1056 | |
| Arfactus_Shade_Of_Birth_Field.png | 1:1 | |
| ArmoredCompanion.png | 1:1 | |
| AureliaHero.png | 1:1 | |
| AureliaHero_Field.png | 1:1 | |
| AureliusHero.png | 1:1 | |
| AureliusHero_Field.png | 1:1 | |
| Baby_Flamingo.png | 756x1056 | |
| BackToNature.png | 1:1 | |
| BlackMarket.png | 1:1 | |
| Blacksmith.png | 1:1 | |
| Bloom.png | 1:1 | |
| Burn.png | 1:1 | |
| BurningPassion.png | 1:1 | Flames of Greed |
| Campfire.png | 1:1 | |
| CapitalGuard.png | 1:1 | |
| Cawn_Teen.png | 1:1 | Cawn (Hero). Filename is unrelated to Cawn's actual age, as the original plan was to have two versions of Cawn that unfortunately never materialized |
| Cawn_Teen_Field.png | 1:1 | |
| CawnSupportingAlly.png | 1:1 | |
| Chains.png | 1:1 | |
| CommuneWithNature.png | 1:1 | |
| Crab.png | 1:1 | |
| CrustaceanCelebration.png | 1:1 | |
| CrustaceanRecruit.png | 1:1 | |
| CursedBeast.png | 1:1 | |
| DarkflameBlast.png | 1:1 | |
| DarkGrip.png | 1:1 | |
| DarkLookout.png | 1:1 | |
| DarknessCloak.png | 1:1 | |
| DarknessCore.png | 1:1 | |
| DefendersHammer.png | 1:1 | |
| DelveIntoNature.png | 1:1 | |
| DinaCrab.png | 1:1 | Dina crab tokens |
| DinaFollower.png | 1:1 | |
| DinaHero.png | 1:1 | |
| DinaHero_Field.png | 1:1 | |
| Dismiss.png | 1:1 | |
| EnergyStrike.png | 1:1 | |
| Enfeeble.png | 1:1 | |
| Enrage.png | 1:1 | |
| ExplorersMap.png | 1:1 | |
| Fireball.png | 1:1 | |
| Flame_Lord.png | 1:1 | Flame Elemental |
| Flameburstredux.png | 756x1056 | Flame Burst |
| Flamingo Lord.png | 756x1056 | Arflamingo |
| Flareo.png | 1:1 | |
| FocusPoint.png | 1:1 | |
| FountainElemental.png | 1:1 | |
| Frenzy.png | 1:1 | |
| GauntletOfPower.png | 1:1 | |
| GiftOfLife.png | 1:1 | |
| Golem.png | 1:1 | Construct (token) |
| GolemFactory.png | 1:1 | Construct Factory |
| GraveAura.png | 1:1 | |
| GreatswordOfAgility.png | 1:1 | Swiftwind Slasher |
| GroveArms.png | 1:1 | |
| GroveGuardian.png | 1:1 | |
| GroveProwler.png | 1:1 | |
| GroveTyrant.png | 1:1 | |
| Growth.png | 1:1 | Growth card in the deckbuilding mode |
| GuardianSoldier.png | 1:1 | Guardian Soldier (token) |
| GuardPatrol.png | 1:1 | |
| GuildTraining.png | 1:1 | |
| HeroDown.png | 1:1 | |
| HeroTraining.png | 1:1 | |
| Hideaway.png | 1:1 | |
| HonSweetpersonThePainter.png | 1:1 | |
| HoodOfTheArtificier.png | 1:1 | |
| HowEnchanting.png | 1:1 | |
| Hunted.png | 1:1 | Hunt |
| InvitingSoul.png | 1:1 | |
| JusticeCore.png | 1:1 | |
| KingOfBeasts.png | 1:1 | |
| LarialToolboxRine.png | 1:1 | |
| LasherChestplate.png | 1:1 | |
| LetsFormAParty.png | 1:1 | |
| LifeCore.png | 1:1 | |
| LifestreamRitual.png | 1:1 | |
| Lion_Cub_Crop.png | 756x1056 | Unused Beast token art by PixiTales |
| LionCub.png | 1:1 | Beast Token |
| LirezielDenizen.png | 6600x4913 | Downscaled to 1024 or 2048 by Unity, so more like 2048x1525 at most |
| LirezielDenizenCardBack.png | 756x1056 | |
| LookAtMyGear.png | 1:1 | |
| LostDeparted.png | 1:1 | Lost Soul |
| MasterGolem.png | 1:1 | Master Construct |
| MasterOfUndeath.png | 1:1 | |
| MonstrousDefeat.png | 1:1 | |
| MonstrousDefeatSpecial.png | 1:1 | Unique alt art for Monstrous Defeat |
| NahuiHero.png | 756x1056 | |
| NahuiHero_Field.png | 1:1 | |
| NalariGroveGatherer.png | 1:1 | |
| NalariSkyseeker.png | 1:1 | |
| Necromancer.png | 1:1 | Varlari Necromancer |
| NumbingSphere.png | 1:1 | |
| NurturingElemental.png | 1:1 | |
| Obliterate.png | 1:1 | |
| OldFriends.png | 1:1 | |
| OverseerGolem.png | 1:1 | |
| ParchedHound.png | 1:1 | |
| PassionCore.png | 1:1 | |
| Paw.png | 1:1 | |
| PeaceCore.png | 1:1 | |
| PlateChausses.png | 1:1 | |
| PurifiersGreatsword.png | 1:1 | Seraph's Greatsword |
| RagingPhoenix.png | 1:1 | |
| RaiseMorale.png | 1:1 | |
| RaphaelTheWayfinder.png | 1:1 | |
| redan_entertainer.png | 756x1056 | |
| redan_sneak.png | 756x1056 | Redan Thief |
| RedanCaptain.png | 1:1 | |
| RedanCommander.png | 1:1 | |
| RedanFruitMerchant.png | 1:1 | |
| RedanMender.png | 1:1 | |
| ReinforceTheGuard.png | 1:1 | |
| RestoringTheRuins.png | 1:1 | |
| Rush.png | 1:1 | |
| Satchel.png | 1:1 | |
| SearchForTreasure.png | 1:1 | |
| ShadowAssassin.png | 1:1 | |
| ShadowCrossbow.png | 1:1 | Darkness Crossbow |
| ShadowHunter.png | 1:1 | Darkness Hunter |
| ShadowHunterFull.png | 1:1 | Darkness Hunter Fullart |
| ShadowsCall.png | 1:1 | |
| ShadowsCallAlt.png | 1:1 | Alternate art for Shadows' Call |
| ShadowSword.png | 1:1 | Darkness Sword |
| SiphonEssence.png | 1:1 | |
| SludgeElemental.png | 1:1 | Slimy |
| Smash.png | 1:1 | |
| Soar.png | 1:1 | |
| SoaringElemental.png | 1:1 | |
| SoldierTraining.png | 1:1 | |
| SouliteSword.png | 1:1 | |
| SoulsEruption.png | 1:1 | |
| SpellPractice.png | 1:1 | |
| StaffOfTheWilds.png | 1:1 | |
| Strain.png | 1:1 | |
| Struggle.png | 1:1 | |
| Sul_Farthal.png | 756x1056 | Sul Quillcroft (Hero, renamed as the name didn't fit) |
| Sul_Farthal_Field.png | 1:1 | |
| SulFarthalKnowledgeWielder.png | 1:1 | Sul Quillcroft, Knowledge Wielder |
| Supplies.png | 1:1 | |
| Tarin_Spellburst_Hero.png | 1:1 | Tarin Spellburst (Hero) |
| Tarin_Spelllburst_Hero_Field.png | 1:1 | |
| TarinSpellburstTheUncounterable.png | 1:1 | |
| TheShadow.png | 1:1 | |
| Threaten.png | 1:1 | |
| Thulari_Mercenary.png | 756x1056 | |
| Timoteo.png | 756x1056 | Timoteo "Tim" Shattershot (Hero) |
| Timoteo_Field.png | 1:1 | |
| ToTheGeneralStore.png | 1:1 | |
| Treasure_Dragon.png | 756x1056 | |
| treasure_redan.png | 756x1056 | |
| Undead.png | 1:1 | Undead (Token) |
| UndeadLostDeparted.png | 1:1 | Undead (Lost Soul Token) |
| UndeadMob.png | 1:1 | |
| UpgradableServant.png | 1:1 | |
| VarlariTrainee.png | 1:1 | |
| Warrant.png | 1:1 | |
| WatchTower.png | 1:1 | |
| WereAdventurersNow.png | 1:1 | |
| WhisperingBook.png | 1:1 | |
| WorldsEnd.png | 1:1 |