Vi
En
VI only
Game Xìm Xàm
Vai trò
Miếng trầu là đầu câu chuyện, câu chuyện là đầu showcase. Tớ kể tuần tự một câu chuyện nhỏ dẫn đến bài viết này nha!
- Đầu tiên là illustration cho web c9 với concept đơn giản thanh mảnh
- Illustration thôi đâu được, nhúc nhích đi chứ, vô AE làm động đậy
- Động đậy được rồi đến lúc xuất hình gif để lên web cảm thấy quá mệt với mấy setting export cho nhẹ file nên tớ mò qua Lottie animation
- Làm Lottie sướng quá, file nhẹ, vector animation chạy bằng js muốn chạy lúc nào cũng đc
- Nhưng mà có 3 round xìm xằm lặp đi lặp lại hơi chán, mình tách 2 tay ra cho nó xìm random mới vui
- Chợi dui quá dui quá mà ủa mà xìm xằm random mình nhìn nó chơi vậy thôi hả, mình chơi được hông? Ôke chơi được chứ.
- Ụa khoan rồi chơi mình vầy chán vl, chơi online realtime với mấy ml khác đc hông??
👉👉👉 Được! 👌👌👌
Everything happens for a reason, there is a story behind this showcase that i want to tell you:
- It started with a light and simple illustration for c9’s website
- Only illustration is boring, i wanted it to be more amazing, so I opened After Effects.
- After having it animated, I got tired surfing through many export settings to have a light weight gif. Then I found out something called Lottie animation…
- Lottie was supa cool! A vector-based animation powered by js, i could fully control it, animated it whenever and wherever i want.
- This is where things began. I felt bored watching it loop with 3 rounds of game over and over, then made it play randomly on each side.
- It’s getting better, and I wondered if I could control one hand and play with the other? Well, i made it work.
- Last but not least, I again felt bored playing alone. It would be fun if I could play with another person. Can I make it online???
👉👉👉 Sure! 👌👌👌
Vậy là tớ có một ý tưởng về cái game xìmxàm online 4.0, nghe nó khùng điên dở người hết sức, nhưng thây kệ, mình làm mình thấy vui là được. Nên tớ cứ vậy làm thôi, vì là side project nên rảnh lúc nào làm lúc đó, cũng có lúc bị job đè nên đắp chiếu cho nó một hai tháng rồi lại bê ra làm tiếp. Mãi rồi cũng xong, nhưng làm xong ra thành phẩm rồi gom góp lại chỉ được mỗi cái video động đậy dưới đây là hết 😂😂😂
That’s how an idea of this game pop out of my brain. I call it “XimXam” which means ‘scissor rock paper game’ in Vietnamese. It might sound weird when i try to bring a real life game in to digital world. But i feel good doing it, that’s all! So i decided to make it my side project, to kill my free time.
Design & animation
Về design, thú thiệt tớ không làm bản thiết kế nào cả. Mọi thứ phát triển dần dần theo câu chuyện bên trên. Ban đầu chỉ có hai bàn tay, sau đó add thêm cái background nhịp nhịp, rồi thêm 3 cái nút… Và cuối cùng nó thành hình như cái giao diện như bạn đã thấy hehe
Tớ khoái làm animation, nên cũng dành không ít thời gian tỉa tót cho mấy cái motion trong game. Trừ hai cái bàn tay xìm xằm, còn lại tất cả mọi thứ động đậy đều từ css và javascript mà ra.
Design & animation
To be honest, i didn’t do any design for this project. Everything grew up gradually as the story i told above. In the beginning there was just 2 hands, then the circle background was added, and after that were the 3 buttons… Finally, the interface turned out as you see, heheeh.
I love doing animation, that’s why i spent so much time adjusting every motions in the game. Everything but the 2 hands are made with code – css and javascript.
Tớ cũng định dàn một ít screenshot cho đẹp cho nhiều hình nhưng nghĩ đi nghĩ lại cái này là minigame có được mấy screen đâu, mà để động đậy như vầy lại vui hơn haha
Nếu bạn muốn chơi, mời bạn ghé chơiiiii
I really want you to enjoy this project with tons of fancy images. But, I’m sorry i can’t. This game is pretty simple and doesn’t have many screens to show. On the other hand, i have spent my time for animation, then how can i fill this showcase with a bunch of still images? A single video does the job better, right?
Do you like it? Let’s play a gameeee
Showcase
Project này thật ra khối lượng công việc nằm nhiều ở khâu coding. Có những chi tiết ban đầu tớ không lường trước được, và nó phát sinh dần theo câu chuyện bên trên. Rồi tớ lại tốn thêm vài triệu tế bào não để giải quyết những vấn đề đó; vì đã không làm thì thôi nhưng một khi đã làm thì tớ sẽ không làm hời hợt. Dù cho đây là side project, làm vui vui.
Xin chia sẻ lại với bạn những vấn đề và cách tớ giài quyết nó nhé!
🚫🚫🚫 Cảnh báo: wall-of-text, và text này nó mang màu IT 😂😂😂
Showcase
Most of the workload in this project is coding. There are some details i cannot foresee, they just appear on the progress. Problems happen and i cannot leave it, they cost me millions brain cells to solve. Because i don’t work anything halfway, even if it is just a side project.
Let me show you my problems and how i sort them out!
🚫🚫🚫 Warning: wall-of-text, text form IT universe 😂😂😂
Read the showcase
👇
Đọc show case
👇
note: không hiện title thì xóa class has-title
Game xìm xằm thì cần gì?
Câu hỏi trên này giống như giai đoạn đọc brief và debrief trong một dự án quy củ, nhưng làm cho vui thì làm gì có yêu cầu cụ thể đâu. Giống như cái câu chuyện bên trên, tớ cứ ngẫu hứng xây dựng thêm từng phần từng phần, cứ như vậy đến khi cảm thấy đủ để đem ra mời mọi người chơi thử, vậy là được.
Và sau cả quá trình đó, những yêu cầu chủ chốt tớ gom lại là:
- Làm được một game chơi xìm xằm ra kết quả: ăn, thua hoặc huề, xìm 3 cái rồi chốt game
- Canh timing cho trải nghiệm người chơi khi bấm kéo/búa/bao ăn khớp với animation
- Giao diện ổn, dễ hiểu dễ chơi
- Khi lên online, có một vấn đề phát sinh là độ trễ giữa 2 người chơi, nó không nên vượt quá 0.2s
- Bắt cặp ngẫu nhiên khi có nhiều người cùng chơi
- Link riêng cho 2 người chơi cố định muốn chơi với nhau
- Thống kê và xếp hạng người chơi
4 trong 7 yêu cầu trên đây là nó tự động phát sinh thêm sau khi game được upgrade lên chơi online realtime, và nó cũng là điểm sáng của showcase này 😂
Bỗng dưng một portfolio về thiết kế nó lại trở nên IT nhỉ, nhưng không sao haha, tớ sẽ cố viết để cho các bạn không phải IT có thể tiếp cận được 😂😂😂
Còn bạn nào IT vipro thì cũng đừng cười đừng phán xét nha 😭
The requirements for scissor rock paper game
As mentioned above, problems came to me one by one during my every step on the progress. Everytime i finished a feature, another one jump out of nowhere, keep me busy all the time, lol.
To wrap it up, there are:
- The basic needs of a game: playable and show the result of win, lose or draw; 3 rounds each game.
- Adjusting the timing when player choose scissor/rock/paper to match with the animation.
- UI need to be clear, easy to understand and play.
- When updrading to online version, the delay between 2 players must stay under 0.2 sec.
- Random paring when there are many players.
- A need of private room for players who want to play together without strangers
- Ranking and statistic
Well, 4 of 7 requirements are incurred when the game was upgraded to real time online. And it could be the shiniest point of this showcase 😂
I’m not sure if you’re an IT expert or a fabulous designer. But please, don’t laugh et me when i say something wrong 😂😂😂
Coding & thuật toán
Thật ra game này chẳng có gì phải gọi là thuật toán cả, nó như một bài tập nhập môn lập trình tin học hồi xưa: nhập kéo búa bao, máy chạy random ra kéo búa bao rồi xuất kết quả ra màn hình. Khi lên đồ hoạ với animation thì giới hạn thời gian chọn kéo búa bao lại, vậy thôi:
Algorithm & coding
Basically, this is just a simple program with one input (scissor/rock/paper) and output (win/lose/draw). The computer gives a random scissor/rock/paper, then performs a simple calculation and displays the result. Coming with the graphic user interface is an advanced feature to limit the picking time for user. That’s all.
Nếu bạn bấm không kịp, chơi xìm xằm ngoài đời là bạn ra sau và bạn sẽ bị chửi sml. Nhưng ở đây tớ mặc định nếu bạn bấm không kịp, bạn sẽ ra búa, để khỏi cãi cọ nhau. Lý do ra búa vì lúc tay vung vẩy lên xuống bạn đã để sẵn cái búa rồi!
Và để chơi online, phải có mạng, phải gửi data qua lại, phải bắt cặp người chơi với nhau, vân vân.. Như vậy cần có một cái server để làm nhiệm vụ trung gian đó:
In real life, if you don’t pick the hand gesture on time, then you’re a cheater. However in this game, when you don’t pick your gesture for any reason, you will get the default ‘rock’. Because when you swing your hand, it also shows the ‘rock’ as well.
When the game goes online, it needs internet connection to send gesture data, pairing users, ect. Then a server is needed to handle those tasks.
Nhưng làm một cái game chơi vui vui mà phải thuê hoặc tự setup một cái server ư, đâu tới nỗi vậy. Tớ lần mò trên internet và tìm ra một server chùa hỗ trợ gửi realtime message theo dạng peer-to-peer, và họ hỗ trợ cả API javascript. Có vẻ như đây chính xác là thứ tớ cần 😤
Với pubnub, chơi game xìm xằm sẽ như này:
Oh, but wait… Do i need to set up or hire a server just for a game which is made for fun? I did a quick search and found out a free server that allows me to send real time messages by peer-to-peer method. They also support javascript API. Great, that is exactly what i need 😤
With pubnub, the game will look like this:
Thơm, ngon, ngọt lành! Đây là clip quay lại ăn mừng khi tớ vừa chơi được một màn xìm xằm từ điện thoại với laptop:
That’s cool! This is the very first video i recorded when i played a game between smartphone and laptop for the first time.
Nhưng vấn đề lại bỗng dưng lòi ra khi tớ cho nhiều người chơi cùng một lúc. Do pubnub gửi message theo dạng peer-to-peer nên tớ cũng xây dựng thuật toán theo kiểu gạ kèo bắt cặp request-response:
At this point, the problem came out. The peer-to-peer method makes me think of the request-response pairing:
Thuận tự nhiên thì sẽ như này
In my expectation:
Nhưng không…
Cách làm gạ kèo bắt cặp này cũng giống như crush nhau vậy, ngẫu nhiên và dễ bị trùng. Và thậm tệ hơn nữa vì yêu đương có thể thúi tha yêu 2 3 đứa nhưng xìm xằm phiên bản này tớ chỉ cho có 2 đứa chơi nhau thôi. Và hiển nhiên cũng có nhiều đứa vô phúc, gạ rất nhiều nhưng không ai chấp nhận…
However…
Life is hard, things gone bad 😂 My simplest algorithm cause the worst problem when multiple players send the same request to just one player. One of them gets the response, the others turn back and stay in the previous struggle, over and over. That makes the waiting time last longer and longer. The more users online, the longer they have to wait.
Êww xin lỗi vì đã dùng điện thoại dỏm quay lại màn hình mà không dùng screen record, lúc này tớ không nghĩ sẽ có quả showcase phải dùng tới nó đâu…
Tớ dùng cả thuật toán quay lui chọn lại, nhưng cũng có nhiều pha phải chờ rất lâu mới được chơi. Có vẻ như request-response không đúng ở đây.
Và, bằng một cách tư duy lươn lẹo nào đó, tớ nghĩ ra trò chỉ định một đứa bất kì làm tổ trưởng, và nó sẽ đóng vai trò là một server tạm thời, chỉ định bắt cặp người chơi 😂😂😂
I used the backtracking algorithm, but it cannot completely solve the problem. Sometimes, players still have to wait for a long time. Seems like the request-response method can’t make it work.
I have plan B! The solution is to assign one player a master. The master will assign 2 players for a game, no inviting no accepting anymore 😂😂😂
Nhưng, người chơi thì không cố định, lúc ra lúc vô, không ai ở hoài trong đó để làm tổ trưởng hết. Vậy nên tổ trưởng sẽ được thay phiên bằng cách thi coi ai nhanh mồm nhanh mép hơn.
The next problem appear when the master leaves. To keep the game on, other players have to raise their hand to take the master role. The first one becomes the next master.
Và quá trình giành giật này sẽ chạy dưới background, dĩ nhiên rồi. Và đây là thành quả, delay lúc này khoảng tầm 100-150ms, mỗi người chơi sẽ phải chờ khoảng tầm 3s để vào game. Cá nhân mình thấy cũng kha khá ổn cho một cái server chùa hehehê
The rival happens in background, oviously. And here is the result, a good result. The ping time to server stay between 100-150ms, and the waiting time takes up to 3s. In my opinion, this is acceptable for a free server, heheeh
Vậy là yêu cầu số 4 và 5 đã được giải quyết. Số 6 cũng không gây trở ngại gì, vì pubnub hỗ trợ nhiều channel; khi vào game sẽ được chơi ở channel chung, còn muốn chơi riêng với nhau thì chỉ cần tạo một channel và ném cả 2 vào đó là xong! Yêu cầu cuối cùng chỉ là thống kê và lưu trữ bình thường, không cần thiết phải để tâm vướng bận 😤😤😤
So, i just solved problems 4 and 5. The 6th one is not a big deal because pubnub supports multichannel. The default channel when people join the game is the public one. When 2 players want to play privately, one of them just has to create a new channel and invite the other to join, easily.
The last point is ranking and statistic, not a problem for me 😤😤😤
Chốt
Và… xong rồi đấy ạ! Tự đẻ ra vấn đề, tự giải quyết. Bạn có thể cho rằng tớ quá xá ở không khi đi bày trò như vậy, nhưng đúng là tớ rảnh thiệt. Game làm xong tớ có đem khoe với mọi người, cũng nhận về nhiều lời tán dương, việc đó làm tớ thấy vui trong lòng, như vậy là đủ.
To sum it up
Oh… we have come to the end of this showcase. I give myself problems, i solve it myself. Wooh you might think im crazy, maybe i am, lol.
When the game was done, I invited people to play, got some compliments. That warm up my heart, you know. It’s enough for me.
Nếu bạn thấy thích, mời bạn ghé chơi!
. . .
Project 12.2020
Showcase viết tháng 04.2021
Đăng tháng 07 năm covid thứ 2
I think you may want to play, let’s play:
. . .
Project finished in 12.2020
Showcase written in 04.2021
Posted in July, the second year of Covid
