$30.00
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Hi all,

I have started a makeover of Lost Cities on the online platform Happy Meeple.

I thought it would be nice to post regularly on how things are going. I don't know if this behind the scene will be interesting really. I can just hope so.

So let's try this!

Day 1

First things first, let's see how it looks now!

Old version - Opening screen


Old version - Middle game


As you can see, the playing area is small. It is 534 pixels high, 480 pixels wide. This is quite small by today's standards. And all the smaller as it is displayed on a wide screen like in the screenshot.

The new size will be 580 pixels high, 670 pixels wide. You can see how much difference it makes by looking at the Migrato implementation below. Migrato is our latest game, that we just released in december 2015 (it is doing very well on Happy Meeple and waiting for publishers outside of France in case some read this).

Migrato middle game


Lost Cities was programmed in 2011. At the time HTML was only beginning to standardize. Internet Explorer used to make HTML developers' life difficult when they were #1. When they fell behind, they finally started to follow the standards which means that one piece of code generally works on every browser now which is a considerable improvement. At the same time, CSS technology improved drastically and we now have at our disposal things like text-shadow, box-shadow, transparency and even CSS built-in animations. This last bit is of particular importance. Making an object blink or change size is now done with just a few CSS lines when it used to require regular programming.

You may not have any clue what CSS are. CSS stands for Cascading style sheets. It is basically the piece of code that deals with the presentation of HTML pages. So the structure of a page is written in a HTML file while color, width, borders, etc. are set in a CSS file.

Migrato has benefited from all these new features.

1) Cards and buttons are highlighted in a more subtle way. A halo surround them with a color that depends on the phase. The halo also blinks to make it more obvious when cards can be clicked/selected.

2) Card rotate. Look at the Migrato screenshot and you'll see that cards are not perfectly aligned as if you were playing at a real table. Look at the columns of cards and the discard pile!

3) Cards flip. After being dealt to your hands face down, cards flip nicely.

We have also rethought (and reprogrammed) completely the way we handled hidden cards. I won't go into too much detail, but let's say that unlike mobile apps, the user can see inside the program. Every object displayed in the browser can be seen by the user. And every variable can also be looked at. It means that it is possible to peek at other player cards if they are only hidden on the screen, but not in the program itself. We have gone to considerable length to make sure that this is very difficult to do (if at all possible) on Happy Meeple and it has really been painful to implement. However this is done now and it will make our life much easier in the future.

This rethinking was accompanied by the development of objects that are now easily reusable (as for all objects really, that's the idea behind programming objects) like decks and piles (we already had cards and dice objects). We can now make a deck of cards within a few lines, linking it to an underlying deck logic. We can also easily build a pile from a deck (both the visual pile the underlying logic). We can also reshuffle one pile into another. Finally, we handle card movements and their associated locations. The system is now able to replace hidden cards by dummies automatically. By using our new generic functions, the dangerous, complex business of hiding cards is dealt automatically. Not only this will save us a lot of development time, it also prevents many many bugs.

Well that is the program. Make the screen bigger, plug the new objects (decks, piles, card movement) into the existing system and then benefit from nice highlightings, rotations, flippings. I am pretty certain that the makeover will not stop there. Ideas will come along the way. Lost Cities is a great game that deserves the best implementation. It is only time we do this makeover.

I will probably be posting a first screenshot of the "building site" soon. I have not touched much yet, but it is already a big mess.




4 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 2

I told you the game was already a building site. Look at this! It does not look like anything.



The first thing I have worked on was plugging my new deck object in the system. I built a new deck with 60 cards and put it into a pile (that shows on the right).

Funnily enough, I have kept the old cards for the moment. The cards are therefore duplicated! As if there was a ghost/mirror game going on.

I don't know how long I will be able to keep them going side by side, but my intuition is that it might be helpful along the way for debugging. It does not cost much in terms of development time for now, so let's see how it goes.

Obviously you will have noticed the rounded hands of cards. That was the second step. I realized that a proper hand object would be handy and I developed the necessary class to deal with it. I can now set up a hand of cards easily. All I have to do is set the height and width of the hand, the number of cards it has and that's it, it is created, ready to use. Along the way, I will probably need to refine the hand object so that card movements from and to the hand are handled easily. move_from_hand and a move_to_hand functions are in order.

Computing the positions of each card and the rotation angle was a bit trickier than I expected. Nothing unsolvable though : I had a nice time figuring out how to compute them. In previous game (Migrato), we already had a hand of rotated cards. But as there were only 3 cards in the hand, I did not really bother computing the positions accurately. Now the job is done properly and reusable.

I am not sure how useful this thread is. Not a single thumbs up! That's a bit disappointing.

See you soon anyway!
5 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Wayne Walker
United States
Chuluota
Florida
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Thanks for the peek behind the curtain Nicolas. I have played a lot on Happy Meeple, but not recently. I should remedy that!
4 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Patrick
United States
Saint Louis
Missouri
flag msg tools
Btȝ patrem nrum, Benedictum
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
wwalker98 wrote:
Thanks for the peek behind the curtain Nicolas. I have played a lot on Happy Meeple, but not recently. I should remedy that!

Ditto.
3 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 3

First, thank you for your support. It is nice to see that someone is reading, and what more, with interest.

Day 3 was that kind of day. You worked, but you feel you did not actually make any work. And you don't have much to show.

Arguably, I was not idle and did a few other things on the side.

I have got an ongoing issue with Google. Since the 26th of november, it cached an outdated version of the page. Instead of showing the actual content of the main English page, it shows a maintenance text... It was unfortunate that Google visited the page when it was in maintenance but it was our fault that it cached it. Maintenance pages should return a special code (503) that makes search engines aware that the page is temporary and that they should back very quickly to get the real page. We did not have that code. It is now corrected but Google seems to have gone wrong because of this. I did not realize about the issue for more than one month although I had noticed a deep in the number of people finding us thanks to important keywords. At first I thought it was just a normal variation of the search engine, but now that I realize the problem, it is obvious that the dip was not normal. It was caused by the maintenance page being cached and cached for too long. I have been struggling with this issue for a few weeks now. And nothing seems to work. Google is being stubborn. Arguably I have managed to make it remove the wrong cache and display something better. But I would like it to get back on track for good without me needing to do anything manual any more. Checking this took a bit of my time during the day.

As is not unusual when reworking on existing stuffs, I ran into an issue than needed attention. I was only partially aware of this one. The menu page was not loading very quickly and it was annoying while working on Lost Cities because I need to refresh pages constantly. So I looked at it and found out that Happy Meeple had actually become quite a beast. A web page is not reloaded completely when you refresh it. Most of it (image files, javascript files, css files) are cached by your browser and thus the next time you fetch the page, it loads these files from your hard disk rather than downloading them again from the server. It saves a lot of bandwidth and time. However even if those files are cached, the browser still asks the server if it needs to get an updated version of the file or not. This creates one http request per file and in Happy Meeple case it means about 160 requests! To some extent requests may run in parallel, but not completely. Tens of seconds are added here and there and in the end, Happy Meeple main page takes 3-5 seconds to get everything ready (if you are curious about this, I recommend to open the developer console and go to the network tab, then refresh the page and see how the resources are loaded one by one). There are ways to improve that fortunately and we already have quite a few in place. But we need to do more obviously! The first way is to put several javascript files in one. We do that for most of our files but not for the APE layer which deals with the exchanges between the browser and our server. I will do that a bit later. This should save 10-15 requests. The second way is to use sprites. Sprites are images that contain images. It is a nice idea. Instead of having 10 files for your 10 icons, you only have a bigger image that contains the 10 icons. Instead of 10 requests, you only have one. The problem with sprites is twofold: firstly, they are a pain to make and are aukward to use, secondly, you don't want to use sprites when things change often, because you will waste a lot of time remaking the sprites. I have used sprites from the beginning for the meeples and bots, but as icons have been added steadily, it is now time to have a look at this issue. I spent some time doing 3 sprites. I think there is room for some more, but I did the ones that were the easiest to make (the others will require code changes).

Of course, I also spent some time writing this article and tell about it in a few places including our brand new Happy Meeple forum.

So now what was really done on the Lost Cities project?

I told you about the new pile and hand objects. Well, I basically worked on them.

The deck object developed for Migrato did not have all the features that I wanted. In Migrato, we did not need to click on the pile because drawing cards is automatic. So the pile object was missing this. It may seem a simple thing but this "click on deck" event was not as straight forward as expected. Firstly we needed to be able to highlight a clickable deck. This was done by adding a new division (= div = an HMTL object) in the pile object. The pile object already had 2 divs, one for the background of the pile (that is displayed when there no cards in the pile) and one for the counter (of cards). The highlight div is now situated below the background div. But that left us with a second problem. The mouse cursor must display a hand when an object is clickable. In CSS, it is easy to do that on an object. You just need to write "cursor_:_pointer" with the :hover selector. But on what HTML object should we apply this CSS feature? We cannot apply it to the highlighted zone because it is situated below the other objects. the hand cursor would only show up around the pile not on it! I thought there were two ways to do this properly and probably both would work. The first one is to create an other object above the pile background (and above the cards that will come on the background). This object would be transparent and with the same size as the cards. With the appropriate CSS code, it would correctly display the hand cursor when pointed at and it would also receive all clicks at that location (but then not the cards below). The other way is to find out what the top card of the deck is and let it manage the click and mouse cursor. We chose the second option because that's the logic applied to the rest of the program. Clicks are done on cards. So we thought it would be more efficient to do it that way.

Regarding the hand object, I told you that there was the need for 2 more functions: move_card_from_hand() and move_card_to_hand(). Well actually there was the need for 4 functions. And we worked on them: move_card_from_pile_to_hand() and move_card_to_pile_from_hand() are also needed. All these functions call the same move_card() function in the end, but before doing so, they handle the specific bits needed for the hand and pile management. As an exemple, the pile object has a counter of cards and this counter does not update spontaneously if we just move the card from the deck to another location. By calling the function move_card_from_pile() or move_card_from_pile_to_hand() we make sure that the counter is taken care of.

As a result of all this, there is not much difference visually. I told you: it was one of those days...

3 
 Thumb up
1.00
 tip
 Hide
  • [+] Dice rolls
Franz Seper
msg tools
Re: [WEB] Lost Cities makeover behind the scene
Very technical, not easy to read with medium-level english and low-level programming, last lessons decades ago (before internet).
Interesting enough to read it fast till the end.
To stay interested in long term it would be helpful for me always to work out the advantages for gamers/customers this changes/new technologies bring. (That does not mean I am missing that till now.)
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Thanks for the feedback Franz! You are right. It is a bit technical. whistle

It has to be a little bit though, otherwise there would not be a lot to say really. The idea is to give an insight into the challenges faced by a board game developer, even if most details are not understood by everyone.

As you probably understood, the advantages so far are mainly for me (in the long term). Programming new stuff get easier and easier with each game.

But of course, the advantages for the players will come at some point. They'll be visual mainly. But I will also add some nice touch in the interface. Hopefully.

The most interesting question that will come is: how do I handle the nice artwork of the game now that I have more screen space? Will I be able use the real cards art? Will figures still be readable if I do that? And about the rest of the interface? Can I reuse somewhere the nice illustration from the box cover for instance?

See you soon!

Nicolas.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 4

After plugging some more code, I had a close look at the layout for the first time.

Well, it is not going to be easy.

The new size is only 46 pixels higher than the old one. That does not leave much room for bigger cards or bigger playing areas.

There is much more new space on the right but it is hardly usable. Lost Cities elements call for a certain layout (5 columns on top, 5 columns at the bottom and the discard piles in between) and I really can't see how I could get away with it. Placing the discard pile on the right vertically would break the logic of the game.

I played around with the elements and I am starting to wonder if it would not be a viable option to display the hand of the player below the regular playing area (so outside of the playing area!). It would most certainly work on desktops, but would it on tablet? I need to check this as this would give a lot of extra (much needed) pixels.

Finally, looking at the board from the original game, I think I am not going to use its wood background. The interface will probably look nicer if I only use the 5 nice maps displayed on it.

A few screenshots:




3 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 5

The nagging issue with Google is now solved. I don't really know what made it work, it was a little bit complicated. But it is done and that is a very good thing!

I also had my first spammer on the forum (which is 2 weeks old). Five messages in Polish were posted. They were deleted immediately. At first I thought they had been posted by a bot, but it seems more likely that it was done manually. Forums are notorious for spams. If you install one without extra care, you are quickly flooded. Our forum is integrated with the Happy Meeple playing interface. So you don't register via the forum directly but through the platform. I hoped that this would be enough to deter malicious bots and was a bit disappointed that spam had been posted. The fact that it was probably done manually is a bit reassuring though. Time will tell if I need to add extra security or if it is good enough as it is.

Happy Meeple has 3 parallel environments: production, staging and developementThe former is the real website where people play. The latter is where programming is done. The staging one is an exact copy (at least is should be an exact copy) of the production environment and is used to test our changes before we actually release them. When an upgrade is ready, we first upload it to the staging website and test it from there. If everything is fine, we upload it again to the real website. The staging environment is also used to let users test new features before they are officially released.

The staging environment was not an exact copy of the production one any more, because the new forum had not been installed there yet. So I had to spend some time installing the same forum. I could not really postpone this step. The staging environment just did not work any more without the forum. And I needed it to go further in the Lost Cities makeover development.

I still managed to produce a bit of work on the new Lost Cities. As you can see in the attached screenshots, I played around with the layout. And some decisions were taken along the way.

Most certainly, the cards will be slightly bigger than in the current version. They can't be much bigger anyway. Or they feel our of proportion. Also, I have decided to keep the hand inside the playing area and not put it below. The maps of the original board are now displayed without the board and it will stay like this. The 5 expeditions will take the whole width available allowing for bigger illustrations.









The layout is far from being finished though. I have yet a few decisions to make. First, will I use the arch from the original box cover as suggests the latest screenshot? At this stage, I think I will. The trouble with the latest layout is that the bottom part is a little bit crowded: the hand, the deck, the meeples and the scores, that's a lot!

It was then natural to wonder where I could put the deck, the meeples and the scores. And I came up with the following layout.



My intuition tells me that it is a nice design, quite promising. The thing I am slighlty worried about though is that it might be a bit confusing for new players. Will it still be obvious that the 5 expeditions all work the same and all have the same value. I wonder.

Let me know your thoughts! Would you keep the initial straight layout or would you rather see the rounded layout go ahead? Your suggestions are greatly appreciated.
3 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 6

Good progress were made today. I like the way things are shaping up.









The deck and scores are now in a top panel. While the hand sits nicely on its own at the bottom.

I need to do something on the deck. There are 44 cards in it and each card has its own shadow. The shadows add up together to make a not so nice black area. It is quite tricky though. It needs to be programmed.

The whole layout is just a mock-up. When I am happy with the result (and I think we are getting there), I will have to make a proper background from scratch, starting from the highest quality images.

In the current version, cards are laid out as a serpentine that turns after the 3rd, 5th, 7th, 9th, 11th cards. Each expedition zone is wider now and the serpentine will turn on the 4th, 7th and 10th card.

I need to plug in what is missing in the code. The part dealing with drawing from discard piles is not done yet. So I can't play a proper game yet. This said, I am probably close.
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Stefano
Italy
Milan
flag msg tools
mbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Nice diary. How will the player's and opponent's played card be displayed? Will they be arranged in some kind of arc too?
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Hi Stefano,

Thanks for passing by!

The opponent's hand not be shown. There is no need really for this game as the opponent always has 8 cards. They will be flying out of the playing area to the top as in Migrato.

The opponent's cards will fly to the zone above the discard piles (discard piles = the maps) as is the case in current version. In the last image, you can actually see a $ in the zone (not perfectly placed though).
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 7





There has been some progress today. As you can see I have even managed to play a full game. Discarded cards now land on the maps. I don't like the size ratio between the maps and the cards. I will either have to make the maps bigger or the cards smaller.

The played cards are never accurately placed. They are slightly rotated and offset by a few pixels. All is done randomly. It gives a nice touch and this is one of the reasons behind this makeover: to use the tools developed for Migrato.

You can now see the serpentine I was talking about yesterday. I am not sure if it is the final shape though. A maximum of 12 cards can be played on one side and I need to check they fit. Also, another shape might look better. The arch layout in particular makes it a bit of a challenge. While it is logical that the bottom left expedition starts with a north-east orientation, the top-left expedition would benefit from a south-west start. There is nothing awful here and maybe it is better to keep things simple, but I might try to play with these paths a bit to see if I can find a better way to lay them out without spending too much time.

When an expedition has 8 cards, it gives a 20 points bonus. I also need to find some space to display the "Bonus" word somewhere.

In the last screenshot, the maps are not rotated anymore. They will probably be rotated in the end, although I am not completely sure which version looks the best.
3 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 8

We are getting closer to the final layout. I am quite happy with the latest screenshot.







What changed? I have looked at the "Bonus" signs and their location. The maps are a bit bigger. The individual scorings have been put in the middle next to the discard piles.

The game is now working fine. Everything has been plugged in. Even the cards in the hand sort themselves after each draw, which is a feature (and animation) that our players like.

I think I will probably stop there for a moment and put the finishing (visual) touch later. There are at least two more things that need to be done and one of them has priority.

We regularly get questions about the scoring. Typically players forget the expedition cost or they do not understand the investment cards multipliers or they do not get what triggers the bonus. That's why I want to detail the computation for each expedition. By clicking on an individual scoring, the player will see how it is computed and this should clear any question.

This will also help us with the tutorial: we can probably make it a bit lighter as a result. And that leads us to the priority I was talking about: the tutorial.

We have had great response to our tutorials over the years. Our players generally say that we did a good job in teaching each game in a few minutes. But in the world of casual gaming, every second counts. We board gamers don't fear a few minutes explanation but that is certainly not the case for the average Internet surfer. The games that are success stories today (like Candy Crush) hardly come with a tutorial. One sentence is enough to explain them. People can play immediately. Of course, this is impossible with board games. They always need some sort of explanation. But we must try our best to have short tutorials.

I am actually certain that our Lost Cities tutorial can be shortened. At first, I thought I could improve it here or there, but the more I think of it, the more I wonder if we cannot compress it a lot (and thus need to reprogram it heavily).

The reason why this is now a priority comes with translations. As you know, Happy Meeple is now translated in 4 languages (we stopped Turkish which unfortunately did not give any response). Before releasing a new version, it must go to our translators. Depending on their schedule, it may take some time before they come back to me. For some unimportant translations, I sometimes go ahead and update the platform with English and French only, but for such an important thing as the Lost Cities tutorial, I cannot afford to do that. I need to wait for the translations. So the sooner they are ready, the better. Otherwise the release will be delayed.

Of course, it is a bit awkward. The tutorial depends on the layout and artwork. So it makes more sense to work on it when everything else is ready and won't change. But that's the way it is. I think I am at a stage where not much can change so I can work on the tutorial with good confidence that no (translation) work will be wasted.

So, I will now work on the tutorial and while it is being translated, I will give the finishing touch to the artwork and layout. Translations will probably still be on the critical path this way.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 9

The tutorial makeover has started. I made the decision to make it much shorter. I think the game is simple enough. Long explanations are not necessary as long as the game interface is intuitive and guides the new players when they are not sure.

It means I might add a few things to the interface to balance the short tutorial.



After this introductory screen, the player is asked to play his first move straight away. New players don't want to read long text. It is best to let them do things as quickly as possible! Let's keep those players active!

1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 10

The tutorial is making progress. Its diet is important. We are heavily relying on a few "tricks" to make it much shorter.



Clearly labeling each zone is a good improvement. The big "Discard piles" with arrow can replace a few sentences.
I will also add a label and arrow for the deck (as was done for the discard piles).



Most importantly, we will not go into too much detail about the scoring. We will rely on a summary sheet for each expedition score that the player can display when he wants to understand how it works. It will explain lots of things with few sentences.




As a final trick, I plan to add a few lines that will let the user know what he needs to do in each plase. These will be displayed for the whole game:
Phase 1: Place a card in an expedition or discard a card!
Phase 2: Draw a card from the deck or from a discard pile!

See you soon!
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 11 & Day 12

The tutorial is now over.

One of the big addition is the permanent display of a line that tells the player what he should be doing. Now even if the player has not be taught everything about the game in the tutorial, he can rely on this to figure out what he should be doing now.

On next screenshot, the line says "Phase 2: take a card from the deck or from a discard pile!"



The updated language files are now in the hands of the translators.

We are very proud to offer a multi-language environment. It is so much better for our players to be able to play in their own language. However, in practical terms, it is often a thorn in the thigh for us.

Firstly because translations must almost always come last in the process. Once everything is done, then translation can start and it can delay the release significantly. It is not however the main problem. Arguably, you can wait one or two extra weeks to release a new feature or a new game after you have worked for months on it. It is only a psychological problem. Once the job is done, you want to see it online.

But the main question/issue is how easy it is to make a change on the platform. Knowing that a tiny feature change will require a string change and thus a round of translation is a real pain. Very often I find myself delaying changes or not making them altogether because it will imply a translation round. The unsatisfying intermediate solution is to release the new feature before the translation is completed. In some cases, we do this because the missing string won't come up to new players. But as I said, it is unsatisfying.

Thus, I would not recommend any start-up to implement multi-language early. Make sure your product is good and has met its market before going into this. Of course, if you have in-house translators, things are very different. I deal with French translations myself and therefore French strings are always up-to-date. I never need to wait for myself!






2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Re: [WEB] Lost Cities makeover behind the scene
Day 13

Now that the tutorial is finished and the language files in the hand of the tranlators, I can come back to the game itself and put the finishing touches.

The first thing I did was to work on the background. We now have 5 complete columns with nice images (rather than a copy-pasted dirty version of it). I have searched for the ideal way to separate the columns. Should I blur the separation? Or mark it with a black line? Or a white line? Or maybe no separation at all? You can see the results of this research in the following screenshots.







The last version (thin black separators) was finally chosen.

But I was still unhappy about the maps in the middle row. Look at the background image below! It looks so much better when the maps are not there. They break the columns and the nice images don't have so much power.



That's why I started to play with the maps again, looking for a better layout.

I started by outlining the middle row.




Then I played with smaller maps.


But finally I thought that the whole layout would be even better with no maps at all. Of course this layout is much lighter. And I think this will be the final one. I may still change the color of each discard pile though.



In the process, I have finally got rid of the old game. So far (see day 2), the game was mirrored on the side. It has not helped me so much maybe, but it was a nice feature anyway.

The cards in expeditions are now properly displayed, on top of each other so that the last card is always completely visible.

Finally, I also made sure that there was enough room for 12 cards to be diplayed on each expedition. Although it is very unlikely event, it may happen. The expedition path now fits nicely everywhere with nice turns that make sure that all cards are always readable (that was not an easy task).



We are getting there I think, but unfortunately this will have to come to a halt. I am going on holiday tomorrow and even if I rushed to finish everything (and if translations arrived From Germany and South America), it would be extremely unwise to release the game on the day I leave. This is an easy mistake to make but never ever release a new piece of code before the week-end or before the holiday. You are seriously asking for trouble. I won't say I have not done it. I did it too often actually. As I said, when things are finished you want to see them live. But that's the wrong thing to do! Or do you like working on week-ends?


4 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Franz Seper
msg tools
Great work, great progress. May it be great holidays! It will be great plesure to play with the new great layout!
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Stefano
Italy
Milan
flag msg tools
mbmbmb
Wow, it looks great, I can't wait to try it.
Have a nice holiday!
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Day 14-15-16-17 - Release and final thoughts

Holiday and flu brought the Lost Cities makeover to a halt.

I also went to Cannes international games festival after missing it for a few years. I should not have gone really as I was still sick and could not enjoy my time there. Moreover, security measures led to unreasonably long queues in the cold rain. It was also difficult to find a table to play during the festival and the situation was not better at the off in the evening where chairs and tables were at a premium. As if it was not enough, two restaurants I went to were among the worst in my whole life. Avoid at all costs the restaurants situated seaside between the Palais des Festivals and the Hôtel de ville. Absolutely disgraceful. The owner should lose their nationality (current French politics debate! Just joking.)

I am sure my experience would have been much better if I had not been sick. So take this with a grain of salt! I usually recommend Cannes very warmly because the wheather has always been great for me at that time of the year. It seems this year had everything wrong.

The new Lost Cities version was finally released today. You can now play the new Lost Cities version online on Happy Meeple.



The most important change since I last posted is for the expedition buttons. Now instead of a transparent circle, we display a little round image on the expedition as you can see in the above image (green circle). It gives a nice extra touch.

After this, the finishing touches were mostly done on the shadows and highlights of cards and decks.

The game was released with a deck at the top-left. But it rapidly emerged that this was not natural for right-handed players. So the deck was quickly moved to the right.

Also, the counter of cards in the deck was not easily readable so we added a light background to it.




At the moment of writing these lines, players are still complaining about the long distance between the hand and the deck. From a UX perspective, there is no denying that the deck would be better located near the hand and as you can see from screenshots from day 5, it was originally put there. I then decided on a symetrical layout which I think looks good. It would be very difficult to change it back again now.

As we all know, people are reluctant to change. People need to get used to new things. I hope that the new deck position will be one of these changes that first appear absolutely horrible but are soon forgotten. Only time will tell.

Other than the deck location, feedbacks are really positive. It is very satisfying.

This terminates the series. I hope you enjoyed the ride. It was hard work on my part, but I know many of you followed. So I am happy that I did it.

Have fun!
7 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Antonello Piemonte
Germany
munich
Bavaria
flag msg tools
This was a very interesting read, thanks for sharing your insights and
providing details on the development process. And btw, the new version looks great indeed.


2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Robb Williams
United States
Lancaster
Pennsylvania
flag msg tools
mbmbmbmbmb
I really enjoyed this post. It was very interesting. I just finished a few plays on Happy Meeple. It looks and plays great. I hope this can be used for an app someday. It is a very smooth and colorful design. Thanks again.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Nicolas Guibert
United Kingdom
London
London
flag msg tools
mbmbmbmbmb
Thanks guys for the nice comments! It is great to read feedback.

There is very little chance that Happy Meeple will have an app anytime soon. The whole purpose of HTML5/CSS3 is to be cross-platform in the first place. So essentially, Happy Meeple works on every modern browser and so you can play our board games online on tablets and mobiles.

The project was initially started with mobile in mind (we had a compact mode of the iPhone 3 screen size and a desktop mode). But we had very few mobile users and it was a pain to maintain. So we decided to stop programming the compact mode.

This said, if Happy Meeple were to grow quickly and be a success then an App would probably be in order. In the short term a companion app is more likely.

Robb, what would be the purpose of an app? To be able to play offline? Or any other reason?
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Robb Williams
United States
Lancaster
Pennsylvania
flag msg tools
mbmbmbmbmb
Just to have access to it whenever. Solo play and all that.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Front Page | Welcome | Contact | Privacy Policy | Terms of Service | Advertise | Support BGG | Feeds RSS
Geekdo, BoardGameGeek, the Geekdo logo, and the BoardGameGeek logo are trademarks of BoardGameGeek, LLC.