cosmetic borders and glows for weapons
seiyria opened this issue · comments
- there will be a mapping to track what X has what cosmetic
- there will be borders in the cosmetic shop
- there will be new dropdown entries to apply cosmetics if the items are held
some cosmetic examples: https://plnkr.co/plunk/XyASQBmlHkVmhJFukWtQ
some will be borders, others will be underlays
For solidity implementation, I created a new contract "Cosmetics". These may be "consumables" but we need to spin off the existing consumable contract as it's an overkill to have one contract per cosmetic since it's really just an enumeration and no per cosmetic implementation like per consumable .
Cosmetics.sol: https://github.com/CryptoBlades/cryptoblades/blob/705-cosmetics-shop/contracts/Cosmetics.sol
How many cosmetics each wallet has. uint32 should be more than enough
mapping(address => mapping(uint32 => uint32)) public owned;
The cosmetic ids or enumeration that actually exist
mapping(uint32 => bool) internal _cosmeticAvailable;
A "helper" var to know when to stop iterating when getting all cosmetics owned
uint32 internal _maxCosmeticId;
The tracked events are
event CosmeticGiven(address indexed owner, uint32 cosmetic, uint32 amount);
event CosmeticUsed(address indexed owner, uint32 cosmetic, uint32 amount);
event CosmeticRestored(address indexed owner, uint32 cosmetic, uint32 amount);
event CosmeticGivenByAdmin(address indexed owner, uint32 cosmetic, uint32 amount);
event CosmeticTakenByAdmin(address indexed owner, uint32 cosmetic, uint32 amount);`
WeaponCosmetic.sol: https://github.com/CryptoBlades/cryptoblades/blob/705-cosmetics-shop/contracts/WeaponCosmetics.sol
Mappings:
mapping(uint256 => uint32) public appliedCosmetics;
The tracked events are:
event WeaponCosmeticApplied(address indexed owner, uint256 indexed weapon, uint32 cosmetic);`
event WeaponCosmeticRemoved(address indexed owner, uint256 indexed weapon, uint32 cosmetic);
Will work on the blacksmith purchase and "hello world" UI implementation next
Some changes made to solidity (dropped the max id to avoid unneeded complexity)
From solidity part it's pretty much finished. Some minor changes will be needed based on initial cosmetics deployment.
For UI did basic implementation to be able to test and to get things started:
Two dummy skins added to skill shop (did not separate)
Change skin button, though this will probably be changed to the drop down created by @kcper. The button ALWAYS shows to allow removing skin. A more accurate check would be to see if the item has any skin.
For some reason I made it change weapon skill not skin...
No skin will remove any assigned skin and credit it. Available options are based on available skins. No skin always shows.
The dummy skins add a gold / silver border. What's actually happening is that weapons are being tagged with weapon-cosmetic-applied-cosmeticid class. No skin => weapon-cosmetic-applied-0, skin id one => weapon-cosmetic-applied-1 etc...
Hope this is sufficient to apply the effects in mind.
Please let me know if more is needed from my side as UI is not my specialty.
All code pushed to: https://github.com/CryptoBlades/cryptoblades/blob/705-cosmetics-shop
Note: there is a minor lint issue that slipped under the radar
@kcper can you take this and merge the recent dropdown change to make it work?
@bilbolPrime my only request is that you also add the same thing for characters, character-border-1 etc
Went with character-cosmetic-applied-1 to be consistent with weapons. Should be easy to be changed if needed.
Some minor lint issues remain...
Yes I already merged the dropdown into this earlier and started working on css for other cosmetics. I'll pull new changes and also convert into new dropdowns and will push an update tomorrow morning.
Quikc summary of my work and where we're at:
- I moved @bilbolPrime's changes into new per-nft dropdown (merged main and resolved conflicts).
- Introduced styles from Sei's link in WeaponIcon.vue component and adjusted some of them. For testing they are using cosmetic number based on weapon id, but I left a comment there what to replace it with.
<!-- below use of weapon.id is for test purpose, should be replaced with getWeaponCosmetic(weapon.id) -->
<div class="animation" v-bind:class="'weapon-animation-applied-' + weapon.id"/>
So right now these cosmetics are just backgrounds and these cool weapon glows, no borders yet.
CharactersList is ready to have same cosmetics introduced and it will basically need copy pasting few bits from WeaponIcon and adjusting.
Before continuing I'd need to get some feedback.
- Which cosmetics work, which don't (and what to do we them - remove/adjust colors etc.)
- Any resources/ideas for border cosmetics?
CryptoBlades.-.Google.Chrome.2021-08-30.12-24-23.mp4
For example I love ID 6, we could duplicate it with different element colors.
PS. Below close/reopen - missclick.
6 is arguably one of the best ones here. You can always change the animation speed and/or color to make it feel completely different. You can also change the start and end glow.
I think the ones that end up taking all of the space (id 11+) probably won't make the cut, but we can spin some variations of the one on 6 to make up for it. How many cosmetics are we targeting here? I can try a few more as well.
As for borders, steam did a cool thing recently with their avatar customization with their software. I would try some of these:
- make the circular glow on id 14/15 as square as possible and push it to the border area (so there's transparency between the center and edge, like with id 16) (and add some palette swaps)
- add some plain color borders (gold, silver, bronze)
- "bar-style borders" where only the left and the right have border/animations (an example of what we can't do right now would be doric pillars on both sides, but that's a potential application) - this could have a simple color application, with colors going up on the right and down on the left
this is done!
this is done!