carolinesfinalprojectreloaded

[carolinesfinalprojectreloaded]

[carolinesfinalprojectreloaded]

[carolinesfinalprojectreloaded]

User test 3 - screen recording of Kvack’s screen

[carolinesfinalprojectreloaded]

User testing mishaps

For one user test I recorded the wrong screen throughout the test :)

[carolinesfinalprojectreloaded]

Redirect when “logging in” : Video of working redirect

[carolinesfinalprojectreloaded]

Redirect when “logging in”

I was fixing the redirect upon logging in after adding the userSetup.ejs file, instead of having the login be part of the game in the script.js file. I had now also set up the database for storing the usernames.

This is maybe not a good thing to admit, but it was the first time that I had actively chosen to use Promises.

Promises not working username already added but still redirecting I understand why but just example:

Logging in using the username “Ciccen”, and it is successful...

Even though there was an error as the username was already taken...

Working:

[carolinesfinalprojectreloaded]

NOTES: Handshake error - client socket not working correctly

These were notes that I was taking on the day that I resolved the issue:

“Second socket id disconnects first

Is the issue that I have multiple io objects? One in server and one in script?

Sometimes the invisible them user takes the place of the user I have created, like the name is replaced with them

The last id to connect is the current user id

Maybe it’s because I’m setting default socket values

Is it because the query value is different in the path as it matches the username

Tried checking what namespace users were in

Removed this from game.html      <script>        const socket = io();      </script>

It has taken me SO LONG to figure out this error…. I asked for help in forums I have done other things and come back to this for WEEKS And all I had to do was remove that script tag”

[carolinesfinalprojectreloaded]

SOLVED:Handshake error - client socket not working correctly

I have now figured out the “error” (answer to my first question), a while ago I had inserted this tag into the html doc where the script.js file is called and forgotten all about it:

 <script>    const socket = io();  </script>

This was what was making the second client connection (I’m also calling const socket = io(); in my script.js file). [...]

Just in case anyone is looking for an answer to my second question

How do I include socket.io-client correctly?

This is working well for me in my module import { io } from “https://cdn.socket.io/4.4.1/socket.io.esm.min.js”;

Quoting myself, source is this forum post: https://support.glitch.com/t/socket-io-user-establishes-two-connections-and-not-sure-how-to-include-socket-io-client/52319/5?u=balto

[carolinesfinalprojectreloaded]

3rd User Test

Planning for 3rd user test (2nd user test with multiple users): I decided to once again follow the structure suggested in this blog post to plan my user testing/research: https://gameanalytics.com/blog/user-research-prototype-stage-game/ *My answers are in cursive*

“Step 1: Plan out your approach

What is your ultimate objective? Currently no longer collaborative focus. A fun, multiplayer game that doesn't take very long to get the hang of or play but that you want to play again and again - eventually with an educational element. I want to experiment with games and learn how to create a fun one so I can then apply that knowledge toward working on gamifying learning experiences. What are your plans post-test? (Dependent on the responses to the survey)To make the avatars more customisable and add different "challenge" aspects like, instead of moving blocks, a labyrinth. Same principle - if you bump into labyrinths edge you bounce back to original position. How much time can you dedicate to test? 1 day. What resources do you have? Friends who will be able (have access to devices) and willing to test the game and fill out a review form afterwards. Some have tested the previous version also. Which features do you need to test? The difficulty level of the blocks challenge. Whether the instructions are clear. Whether when you move outside the canvas on the y-axis and you are transported back to the bottom is better than not being able to leave the canvas at all. Hoping for thoughts/opinions on some potential additional features I am considering adding. I want to know if people would press the “?” button out of curiosity.   ”

[carolinesfinalprojectreloaded]

Added delay to smooth out movement of character for the other users

The code in script.js:

 //Delay the movement of users when they start the game as otherwise they will move when they press the set username button  function delayMovement() {    setTimeout(function () {      shouldMove = true;    }, 500);  }

[carolinesfinalprojectreloaded]

Handshake error - client socket not working correctly

This is what we want it to look like (image source: https://socket.io/docs/v4/how-it-works/) :

I have described this issue in more detail in a forum post on the Glitch forum, source: https://support.glitch.com/t/socket-io-user-establishes-two-connections-and-not-sure-how-to-include-socket-io-client/52319?u=balto

I’m building a multiplayer game using Node.js, Express, socket.io and p5.js. Please bear with me if I am adding irrelevant info to my queries and let me know if I am leaving out any useful info

Here is a link to the current version: https://fuzzy-troubled-pheasant.glitch.me/ 2 (Remix link on the page, limiting number of links as I am new :))

I can get the multiple clients to communicate with the server and draw multiple users on my p5 canvas, but I kept getting 400 error.

I think this means that I have not set up the client side correctly, but the program was still working as I expected it too so it must be communicating somehow…? The “400” errors were resolved by also adding ‘polling’ to transports:

transports: [‘websocket’,‘polling’],

Now I am getting “200” status codes instead, like on Socket.IO tutorials. Is this because it was always communicating using ‘polling’ and now I have “okayed” that type of communication?

But now, whenever a user connects two connections are made. Ciccen (I’ve gone with old-timey spelling for types of birds, not sure why) is the active user and ‘Them’ is the placeholder username I am setting for all connections:

NOPE I WAS WRONG THEM IS STILL BEING CREATED1098×1936 202 KB

I thought maybe Them was the result of an open browser window, but that second connection alsways disconnects at the same time as the active user.

My questions are:

Can you see why two connections are being created?

How do I include socket.io-client correctly?

I have included socket.io-client in my package.json file but am not sure if I also need to call it in my module script.js. I have tried using the ES6 format as described on Socket.IO site (have commented out this line in the linked version so the app works):

import { io } from “socket.io-client”;

But then I get the following error:

Uncaught TypeError: Error resolving module specifier “socket.io-client”. Relative module specifiers must start with “./”, “…/” or “/”.

And if I change it to:

import { io } from “./socket.io-client”;

Then I get this error:

Loading module from “https://fuzzy-troubled-pheasant.glitch.me/socket.io-client” was blocked because of a disallowed MIME type (“text/html”).

[carolinesfinalprojectreloaded]

Made website and game responsive

I have made both the site and game responsive, but there was still an issue I needed to solve: The user’s character would go outside the canvas if the window was resized to a too small size.

This is the code that was called whenever the window was resized:

To solve this, I added the following code:

By dividing the positions by width/height before resizing the window, then scaling it back up using width/height afterwards the character will stay in the same relative position.

I still have to add emits so that the user’s position is updated for any other users in the session.

Though, it is still not working when there are multiple users in the session.

The user actually moves around the canvas randomly. Rather than the other user(s). I need to check whether I have any code that could be messing with the xPos yPos values if they are below 1 (because I am scaling them).

[carolinesfinalprojectreloaded]

User test 2 - reflections

The testers expressed a slight preference for sticking with a competitive game rather than making it collaborative. This is probably biased due to the fact that they have just played a competitive game.

The random speed the circle moves at and setting a custom username was viewed positively by the majority.

The view on the limitation of not being able to move backward is 50% ambivalent and 50% positive. I will decide whether to keep this feature once I decide what the map for the game should be like. 

Changing the circle’s colour by pressing the space bar is a feature which was not disclosed in the game instructions. This was only discovered by one user and 3/4 of the testers thought that that this feature was neither good nor bad, the tester that said the feature was(would be) very good was not the same one that actually discovered it. So I will rethink the whether this feature is needed and how I should reformat it if I will keep it. One tester suggested that it would be better to be able to set this before you start the game (when you’re setting your username) which sounds more conventional so users would recognise this. They also suggested that adding not only colours but also skins would enhance the experience. Changing colour is also perhaps not a great “hidden feature” as it does not have an impact on the game play.

A user suggested that perhaps the interaction on a smartphone (they tested on a laptop with an external keyboard) would be improved if they could maneuver their character using an onscreen joystick. This would make it easier for the user to maneuver and holding the phone with the same hand, which is preferable and I will look at implementing this because I think it would improve the experience.

The barriers were viewed 50% positively (Good), 25% ambivalent (Neither bad nor good) and 25% very negatively (Very bad). They are currently not looking and working how I would ideally have them look (for example visible to all users upon impact), so perhaps the feedback would be different if they did. The feedback from the survey does make me feel like the focus should not be on this feature and that it will not enhance the game experience.

The feedback from testers states that the game time needs to be increased, which I agree with. During one test the user that joined the game first was pressing up and going up/down the map when the second user joined the first user just hit the target straight away, which meant that the second user essentially just joined the game and was then greeted with the “ We have a winner” screen. 

The idea of adding a labyrinth element, as suggested by one user, is something I was considering previously - but as I was originally interested in creating a collaborative game it felt more convenient to not focus on adding a labyrinth element. Though there are of course collaborative puzzle games; maze games tend to be more of a solo endeavor.

[carolinesfinalprojectreloaded]

Things to work on

Making site and game responsive

Create separate room for tutorial

Create db

Engine.IO handshake - https://socket.io/get-started/private-messaging-part-1/

[carolinesfinalprojectreloaded]

User test 2 - Survey responses

Conducted user tests where users played against each other (rather than against me). There were four users in total, and as you will see below I had an even spread of different devices/device setups.

Here is the prototype that they played: https://summer-certain-slip.glitch.me/

[carolinesfinalprojectreloaded]

Affecting element created in html file in separate js file.

[carolinesfinalprojectreloaded]

User testing 1:1

Performed my first user test by playing the prototype game with another person.

I was playing on my laptop and they were using a mobile phone. The prototype version is available here: https://summer-certain-slip.glitch.me/

The first comment that they had was that the webpage content was not fully visible (horizontally) when they landed on the page. -The responsiveness was something I diverted from after awhile as I found it difficult to translate the various user positions onto different screen sizes and decided to make it easier for myself and just stick to a 500 x 500 px size. When they brought it up I realised that, probably, if I add the specification that the height of the canvas needs to be equal to the width of the screen (so they match) then the translation equations that I previously implemented should work. After the next user test (testers playing against other testers other than myself) I will try this.

The second thing that they commented on was the fact that when another user bumps into their barrier the only way that is conveyed to them is by the other opponent’s jolting movements as they bounce off of the barrier. They suggested it would be better if their barrier was also visible to them when someone bumps into it. -This was something that embarrassingly I’d already intended to be happening but I did not perform a test myself after implementing this feature with a side by side view of two sessions and so I did not catch this before. This was a good reminder to keep testing the product and especially user testing it to get outside input.

They cannot change the colour of their avatar when playing on a device without a keyboard. -I need to implement an alternative to using the space bar to do this.

If you press the UP/LEFT/RIGHT area on a touchscreen for a longer period (longer than a tap) and then release, the circle/character will keep moving in that direction until it is either interrupted by another character or the user presses on the screen again. -I don’t know that this is an issue, but it is something I need to keep in mind. It does mean that the random speed is not visible to mobile/tablet users and losing that effect does have an impact on the game experience. Perhaps I will look into a different way of implementing that.

When you press on a touchscreen for longer periods you are sometimes asked if you would like to copy the text of the “Menu” button. -This is disruptive to the game experience and will need to be fixed. I am thinking to keep the all the game buttons in a separate class to the canvas and then when the canvas is pressed it should not mean an interaction with the button? That is maybe not a correct notion, but I will test this after conducting the tester vs tester user tests.

My main takeaway from this test is that I will need to focus more attention on the mobile user. I am developing on a laptop and so I’ve become biased to testing just on that which is mainly down to laziness and my personal preference.