🎮 Steemit City: Some Graphics
Since my last update, I've spent a huge amount of time working on some graphics which has been a nice change from working on code. Whilst it's been a nice change, it hasn't been the most successful (more on that later) and I've reached a point where the motivation to continue is waning. Good thing I've got a weekend away booked so that I can recharge and hopefully come back with renewed enthusiasm next week.
First though, I'd like to introduce you to @choose-adventure.
This is the profile that I've created to run the game and for players to interact with. It took me a while to find the imagery that I think will work well and I'm rather pleased with how it has turned out.
So when the time comes, this is the profile to look out for when starting and playing a game.
The other thing that I've been working on (and I will use this post as a test) is some imagery for the characters in the game. I can't remember if I said but each character will have a set of attributes which will help determine the outcome of certain events with 4 being displayed to the user:
- Strength
- Speed
- Intelligence
- Health
There are a few other attributes that will be hidden and will be hinted at throughout the story.
So to bring this to life, I've spent some time creating a few templates:
I haven't fully decided what to use each colour for although the green backgrounds will almost certainly be used for the zombies!
One thing that I started playing with today is the icons for each attribute. You'll see the heart next to "Health" and I welcome ideas for the other 3. I was thinking along the lines of 💪 for strength, maybe 🏃 for speed and 🧠 for intelligence although I'm certainly open to other suggestions.
And now the bit that I'm doing a live experiment with.
I wanted to create dynamic images so that the attribute images are created on-the-fly. I've given up on this idea for the time being because I've spent an inordinate amount of time getting absolutely nowhere with it.
So instead, I've split the image up into 6 parts.
And it looks like this won't work because each image has a margin - probably caused by the 150% line height CSS.
This makes me sad so I'm going to go now 😢
The graphic tasks are always the biggest challenge for me too.
Yes, if I set the line height to 0 %, it looks as it should.
The most obvious way is generate all possible cards and upload to steemitimages. It depends on the number of characters. Or did you want to generate such a card for each player?
I don't know if it is really possible, but with svg-images you can create path oriented images (like the steemit-logo in the upper left corner). Maybe you can draw the background, the labels and the values separately and merge them for the user before uploading...
You can also try to split the cards vertically. There is no (left/right) margin between the images in CSS:
The top image is yours and the bottom image is your image divided in two separate images - Strangely, the images are now displayed without (top/bottom) spacing.
The challenge is then to position the values in such a way that they can be cut off vertically from the rest and it does not become asymmetrical... tricky...
I think that for the 4 attributes, assuming a single colour and single image above, I'm looking at about 20,000 images (because the attributes have an element of randomness that means the zombies you face are different each time) - I wasn't optimistic about the 80+ images per colour so definitely need to find an efficient way to generate them.
I'm confident that I can manipulate the images using PHP (I've done similar before) but the difficulty I'm seeing at the moment is how to upload them to steemimages.com for hosting. I've only ever saved images on the server that I've generated them on before - remlaps shared a Java library with me but my Java's worst than my German... nicht so gut.
You've given me a few ideas to work with. I've had a thought about how I can redesign the cards vertically like you suggest without ruining the design too much (although I'm fearful of "line-wrapping").
First though, I'm going to spend some time investigating why there's no gap between the images you've uploaded. I suspect it's because they're tall enough to exceed the 150% line height so the solution might be as simple as a "minimum height" for each image.
I think that the minimum height, slightly taller than the bottom image is the answer!
Definitely too much to upload each one....
The upload must be signed. I once saw the code for this in the condenser code, but only at react level.
I don't know exactly whether it also works with the Steem-JS library (https://github.com/steemit/steem-js).
Maybe this will help you: https://developers.steem.io/services/imageHoster
Among other things, the upload process is described there.
Alternatively, you could of course use your own image hoster. There was a repository for this from steemit, but it is no longer available...
I think you are trying to do too well. Hardly anyone expects a game with cool graphics. Working with graphics takes too much time and requires considerable effort. The players will be completely satisfied with the information that would be presented in an ordinary table.
I know you want to do everything as well as possible, but it can take too much time and effort. Start with something simpler and then you can refine it if you still find it interesting.
🙂 I would like it to look nice and having spoken to @moecki in the comments, we know why the graphics aren't looking pretty and have an idea on how to make them work. I think that including some graphics are important so that it's not obviously a game created by a coder... like you know that steemit is a website designed by coders 😉
It's extra effort, but I think it's worth it (although I'll probably regret it 😆)
Greetings friend.
Your proposal seems very interesting to me, I would like to know what the scenario you would be handling for this game would be like, something like Counter Strike?, where the user through firearms, among others, faces zombies.
On the other hand, I think it would be necessary to create a community especially for players who invest in this game, maybe you could make special cards that generate more power than normal cards and cost a little more than ordinary ones, this in case the game is of a commercial nature.
I don't think the graphics will be as good as Counter Strike... maybe one day but to start with, it'll be more of a traditional "Choose your own adventure" game. Mostly text based where you have a restricted set of options for what you can do next. I hope it works because it's a lot of effort to create 🙂
I have thought about how to "monetize" it but to start with, I'll see if people like it and then work from there. I like your idea of buying "special cards", I'll have to think of a way to include that.