Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411279 Posts in 69323 Topics- by 58380 Members - Latest Member: bob1029

March 28, 2024, 03:02:49 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsPicswars.io: a global strategy where you capture territories for your picture!
Pages: [1]
Print
Author Topic: Picswars.io: a global strategy where you capture territories for your picture!  (Read 2965 times)
cbrwizard
Level 0
**

A game developer, used to be web dev.


View Profile WWW
« on: August 17, 2017, 09:59:36 PM »

Hello, everyone! Coffee For the last months, I’ve been working on a browser multiplayer strategy game called picswars.io. In this game, you select an image and capture territories for it so that everyone can see your picture. Imagine a fight for dominance between a selfie pic and a country flag or a battle between McDonald's and BurgerKing logos? Another cool thing is that you can make only 10 captures every day, so every action counts and everybody has the same chances: the busy people and the gamers.

This is my first devlog, so I will add a bit of background for the whole picture. Initially, the game was called Squardak, which is a mix of square + kavardak (means a ‘mess’ in Russian). The funny thing, the game really was a mess at the start!

This is a first screenshot of the game:

At that point, I’ve just drawn the squares and was very happy with the result. This was my first time with a Phaser.js framework, so it took some time to get it working!

Next, I’ve added an ability to capture squares:

As you can see, there is more UI there. The page looks colorful with all those squares! Note the numbers on the top. Can you guess what they mean without reading a tutorial? Spoiler: nobody could so don’t worry Cheesy

Finally, the game was ready to be playable. It didn’t have any images yet (because it was hard to add), so I’ve decided to add an ability to draw pixel art, by changing each square’s color.

People started drawing something, so it looked promising! But then the reality hit me hard in the face: almost nobody understood how to play it. There was no tutorial, just some helpful tooltips. The game was full of UX problems and there was no point in playing it! Only a couple people were really interested in drawing pixel art, but with the low number of players, the interest quickly faded away.

It was a disaster. Crazy I was expecting something great! Turned out I was very naive and made a terrible mistake of not speaking with the players while building the game. I didn’t have any ways to measure the effectiveness of my features, I didn’t collect feedback.

Luckily, I realized the issues and started organizing feedback. You can see it here:
 https://docs.google.com/spreadsheets/d/1FaEH9uGHclU7EP48r5yh0g0kDvDJJVGwatis7qzoBsc/edit?ts=59788122#gid=0
Next, I’ve added metrics to measure what % of visitors actually capture something, make 1/2/5/8/10 turns and so on. This should help me to understand if people are understanding the game and having fun.

I’ve realized the game is too complicated. Previously, there was a complex logic so that there is a global 30 sec turn. While the timer is going, you can select squares and click GO to submit your ‘capture plan’. Then you needed to wait until those 30 secs pass, after which all submitted capture plans are processed and applied. For some weird reason, I thought that having this timer is a required thing for a game to function and never questioned that. Facepalm The funny thing is that I’ve had a bug which made the capture plans apply immediately without waiting for a global turn to finish… and it just worked. Next thing I did was removing 900 lines of code associated with this timer and everyone was happy about it.

Previously, there was also a capture chance. It was super complicated too. Each of your captures had a capture chance, determining if you capture succeeded or not. If not - the turn (out of 10) is lost; else - you get the squares. The chance was calculated depending on which squares you were trying to capture: the neutral ones had 100% capture chance, while the players’ ones had 50%. The resulting chance was an average of those chances. Epileptic I thought that having that chance will add strategic depth, but all it did was complicating the game, so I removed it. Maybe in the future, I will add more depth, but for now, I should focus on the core of the game, removing all distractions.

That all resulted in a cleaner interface:


Then, finally, I understood why people will play the game (of course this is still a theory to be tested, but anyway). If I provide them a tool to not only post an image on their territory but to capture territories together as a community, then people will play for their friends. Thus, my next task was to add images and add a basic community feature: an ability to set an image based on other player’s nick. That way, for instance, TIGSource supporting players can write down a main TIGSource’s player’s nick and copy an image from them. This will result in a TIGSource image (a logo for example) to dominate the shared field. What’s more, every player will be able to add a link with some text to their territory. This will be really useful for the communities and companies to promote them in this game. Gentleman

Thinking about that, I renamed the game to Picswars.io, so that people will quickly understand that it’s a browser multiplayer game about pictures. The old name made sense only to me, so this was a logical decision as well.

Finally, we’ve reached this week.

Devlog 11.08.17 - 18.08.17:
This week, I’ve added a quick tutorial when a player first visits the game:

It’s something, but not as good as a guided tutorial through the game, which I will add soon.

Next, the most important: I added an ability to upload your pictures (note: the picture isn’t yet applied to squares!). At first, I’ve struggled with implementing the upload and resize with Node, S3 and Mongoose, but then I’ve picked a tool Uploadcare. They have a free tier and some of my friends work there and they’re far more feature rich than I wanted to implement, so why not? Here is the result:



Looks cool!

Next week, my goals are:
Attach uploaded images to the players’ territories
Allow copying other player’s image
Get more feedback

Thank you for reading so far! I will keep writing devlog every Friday, so stay tuned! I will be very grateful for any feedback too! Check out the game at picswars.io!

P.S. I am open about my development, so here are some links:
« Last Edit: September 18, 2017, 10:39:11 PM by cbrwizard » Logged

Check out my turn-based multiplayer strategy game Picswars.io http://picswars.io/?ref=tigsource and please leave feedback! [:
rj
Level 10
*****


bad, yells


View Profile WWW
« Reply #1 on: August 18, 2017, 03:42:31 AM »

hella
Logged

cbrwizard
Level 0
**

A game developer, used to be web dev.


View Profile WWW
« Reply #2 on: August 24, 2017, 09:15:02 PM »

PicsWars.io (http://picswars.io/?ref=tigsource) devlog for 18.08.17 - 25.08.17: Internal improvements!
Hello again!
For this whole week, I’ve been working on adding images to the territories. This turned out to be not a straightforward task, but I’m very happy about it. Why? Because it led to many internal improvements (they’re not yet deployed to the website though)



Firstly, now the game will load much faster. Initially, the game was unplayable until information about all squares was loaded. Now the whole field of squares is rendered and can be navigated immediately after clicking a ‘Play’ button. Right after that a player’s territory is loaded and rendered. Only then all other territories are loaded and turned interactive. In the future, this will also allow me to actually start the game while the player is still on the login-greeting screen. Also, this leads to a decreased amount of data sent from the server to the clients: I don’t send data about each square, I send the data about the territories instead and only apply the needed data changes on the client.

In short, the game will load faster now.

Next, in order to add images to those squares, I need to change the way they’re rendered. Initially, they were rendered as separate Phaser.Graphics. Now I will make a switch to Phaser.Sprite, which will use a spritesheet generated from a user submitted image. What’s more, because of this change I will be able to cache the unique Graphics for each color combination and tell the square sprites to use them instead of generating a separate (even though they looked the same) Graphics for each square, as I did before.

In short, the game navigation and interaction will feel faster.

What’s more, because of those Graphics changes I will be able to easily add icons to the squares to indicate current player’s squares and the capturable ones. No more ugly border color changes! Most likely, I will use emojis [: Also, instead of changing the border on hover I will be able to change the background a bit, which is more intuitive.

In short, the game will look better and be easier to understand.

And finally, I decided to remove the pixel drawing part of the game completely. I have to do it so that it’s easier for everyone: players will focus on playing with images and I will not have to spend time supporting the optional features and will focus on what’s more important to players. Before wiping the pixel art, I will make a screenshot of the full board and post it everywhere, so don’t worry, your creations won’t go away [:

Next week, my goals are:
* Attach uploaded images to the players’ territories
* Get more feedback

Thank you for reading so far! I will keep writing devlog every Friday, so stay tuned! I will be very grateful for any feedback too! Check out PicsWars.io at http://picswars.io/?ref=tigsource!
Logged

Check out my turn-based multiplayer strategy game Picswars.io http://picswars.io/?ref=tigsource and please leave feedback! [:
cbrwizard
Level 0
**

A game developer, used to be web dev.


View Profile WWW
« Reply #3 on: August 31, 2017, 09:46:44 PM »

PicsWars.io (http://picswars.io/?ref=tigsource) devlog 25.08.17 - 01.09.17: Images on territories!
Hello again!

This week I’ve finally finished one of the main features of the game: images! Now everyone can upload an image to cover their territory. That way you can use the game’s rules to let your logo/selfie/funny pic dominate the field. You can upload an image from your device, by url or from other services like Instagram or Facebook.


What’s more, because of the internal changes made last week, now instead of strange looking borders on yours or capturable squares you have more intuitive icons.


Since I’ve moved the game to images, all pixel art is now gone. Here https://twitter.com/cbrwizard/status/903140728313753600 you can see the field before the pixel art was wiped out. If you're interested in drawing pixel art with other people, I recommend you to check out some Reddit's Place clones. I've decided not to be one of them =]

I’ve also made a ton of small adjustments to the game code. The game still feels quite slow though, I will address that soon!

That way, my goals for this week are reached.

Next week, my goals are:
* Allow copying an image from another player!
* Speed the game up by moving the db to the same machine as the backend.

Thank you for reading so far! I will keep writing devlog every Friday, so stay tuned! I will be very grateful for any feedback too! Check out PicsWars.io at http://picswars.io/?ref=tigsource!

P.S. Marked the game as 60% complete, up from 50!
Logged

Check out my turn-based multiplayer strategy game Picswars.io http://picswars.io/?ref=tigsource and please leave feedback! [:
cbrwizard
Level 0
**

A game developer, used to be web dev.


View Profile WWW
« Reply #4 on: September 07, 2017, 11:35:47 PM »

Heya, TIGSource.
I've decided to migrate to Gamedev.net because I didn't get a lot of feedback here. You can read it here https://www.gamedev.net/blogs/blog/2538-picswarsio-devlog/. I hope you'll follow it there!
Cheers!
Logged

Check out my turn-based multiplayer strategy game Picswars.io http://picswars.io/?ref=tigsource and please leave feedback! [:
cbrwizard
Level 0
**

A game developer, used to be web dev.


View Profile WWW
« Reply #5 on: September 14, 2017, 11:06:47 PM »

Posted a new devlog, check it out on https://www.gamedev.net/blogs/entry/2263679-devlog-5-080917-150917-final-features-and-a-tutorial/!
devlog #5: 08.09.17 - 15.09.17: Final features and a tutorial!
Logged

Check out my turn-based multiplayer strategy game Picswars.io http://picswars.io/?ref=tigsource and please leave feedback! [:
Rarykos
Level 1
*



View Profile WWW
« Reply #6 on: September 18, 2017, 05:29:54 AM »

I hate to be the one shitting on dreams but I see nothing enjoyable here...
Had some performance issues with unwanted links opening up and all of my input in delayed, but my biggest issue is the design. Mixing agar.io with those multiplayer drawing boards and taking the worst of both worlds...

Even as a novelty thing, it's just tedious. It's a passable prototype but the design is awful.
Logged

cbrwizard
Level 0
**

A game developer, used to be web dev.


View Profile WWW
« Reply #7 on: September 18, 2017, 10:38:57 PM »

@Rarykos, thanks for your opinion! What exactly in the design didn't you like?
Logged

Check out my turn-based multiplayer strategy game Picswars.io http://picswars.io/?ref=tigsource and please leave feedback! [:
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic