Pre defined textures/styles

Hi,

Quick question, im an ok coder, not a great artist, but ZIM is helping me combine the 2 so thanks doc! So I’m trying to move away from the ZIM ‘look’ and art feel, but having trouble making things look like metal, or wood, or things like pipes that have the right gradients etc to give them a slight 3d feel, but not 3d elements. Any ideas? I really want to try and code it in ZIM, not use photoshop and import images. If this makes sense!

Thanks :slight_smile:

I am sure some of us could help. Two things:

  1. Can you provide snippets of what you have done already?

  2. Could you include examples of what you are trying to do?

Thanks @pettis so i had a card designs that ive badly cut up, redrawn in photoshop, and then overwrote the originals, to make a few other versions lol. they are trading crads for my gaming group. what i want to do is try to redo these in zimjs. the blue is one colour, i change the colour depending on how rare i make the cards. im guessing my best option is to remake them in photoshop, but i have loads of cool thoughts on using ZIM to make the crads interactive. i can make the cards in a very simple fashion, but i would like the border (frame) on these, if that makes sense.


dont zoom in too close, you will see my bad cropping to fit togetjer the card! :slight_smile: but i would like to have gold versions and metal versions etc as well

HAHA Too late.

One more question. How many "cards" do expect to see on the screen?

I would just use the built in ZIM .effect(new MultiEffect()); . You have a good border already made up. Just clean it up a bit. Then for the data of each card you can do something like the following.

let card = {};
card['container'] = new Container();
card['border'] = new Pic('card.webp').effect(new MultiEffect());
card.border.hue = -87;
card.border.center(card.container);
card['graphic'] = new Pic('agumon1.webp');
card.graphic.center(card.container);
card.container.sca(.3).center();
card['level'] = new Label('3',50,null,white).alp(.5);
card.level.rot(-45).pos(10,16,LEFT,TOP,card.container);
card['title'] = new Label('Agumon',64,null,white);
card.title.pos(24,40,RIGHT,TOP,card.container);

Example link: BranMuffin Development

@pettis awesome! thanks for going out your way and setting that up, appreciate it. i like that method, looks really good. i didnt really understand the .effect() but ive just been copying your code and it makes sense. im only shwing 10-20 cards at a time so shouldnt be intensive. im still stuck with my two designs though, i am hoping for some way of re designing the card in ZIM. but kinda keeping the same aesthetics. mainly so i an add some fancy animations an the cards themselves

What kind of animations are you thinking about? It would be hard for me (speaking as a developer) to justify making the card (what I am calling the border) completely out of ZIM. Looking at your design it would take 10+ ZIM objects and it might get you there. But how do you manage all of those objects?