Tuesday, November 8, 2016

Game Maker: Studio Tutorial: How to Create a Platformer Game (Basics)

If you are not familiar with a game engine called Game Maker: Studio, but you want to know how to create a game, especially if it's a platformer. In this tutorial I'll assist how to create one, but I will put links to sources where I find this tutorial which helped me how to create a platformer game back when I was in high school. Also this is a different version of the Game Maker, so if you have a different version like 8.1 or any older versions of this game engine let me know if you want me to cover any these previous versions of Game Maker. For your information I will also include pictures to help out along with their links where I found the images. 

First, let's talk about the game engine. Game Maker is a drag and drop engine; therefore, making it a very simple to learn to some people. It was created by the people at yoyogames, so in my opinion if you want to create a video game without worrying if you need the knowledge to program or coding. Of course it has a programming/coding feature(s) in it, but later in the years after it was created and then released there was updated and more advanced versions of it including Game Maker: Studio. Now let's begin the tutorial. 

  
Creating the Sprites: We can't have a game without the sprites. To create your sprite or sprites, you need to click on the icon that looks like Pacman. Then name your sprites "spr_player" and "spr_wall." 






Creating the Objects: Now, in order to create the objects for your sprites in Game Maker: Studio you need to click on an orb icon then name both of them "obj_player" and "obj_wall."








NOTE: Make sure to center the origin coordinates of your sprites.
Adding Variables: Now, we have all of the things that we need for the game; however, it is time to create a few variables. We need variables because how the player is going to jump over those platforms and more importantly the movement. Open up "obj_player" and then added in the "create event." In this version of Game Maker, the only action we'll need for this action is the "Execute a piece" action where it could be found in the control tab of actions, under code. Here's what the icon looks like.Inserting The Code:   So now we need know what keys on our keyboard that's being pressed and we can add our variables together to tell us which direction the player is trying to move on this frame. After the first line, the variable "move" contains either a positive one, zero or a negative one. We can now simply multiply this by our original "movespeed" variable which we set up in the create event to give us our intended horizontal speed in this frame. If we're holding left then "key_left" plus "key_right" would equal negative one and then "move" will equal negative one multiplied by four; therefore, giving us a horizontal speed of negative four. We now know how we're going to plan to move horizontally, but we need to work out the same with vertically. We don't want gravity to accelerate infinitely, so we're going to check that our vertical speed on this frame isn't already greater than ten which indicates ten pixels a second downward speed. I four current vertical speed is less than ten, then we can continue to increase it by our grav variable this means we steadily fall faster each frame. If we were currently standing on the ground, then we want the ability to jump, so we will use "if (place_meeting(x,y+1,obj_wall)" to check if there would be a collision with the wall object by exactly one pixel below our player.  If there is, then we can allow the player to jump, but all we have to do is multiply "key_jump" (which will be one or zero) by our jumpspeed (negativity because negative vertical speed moves upwards). Then all we need to do is to check whether or not there would be a collision if we were to move horizontally using our "hsp" variable. We do this with the line: "if (place_meeting(x+hsp,y,obj_wall))." This checks, at the coordinates when we would be about to move to (x +hsp, and our current y coordinate) whether or not our sprite would collide with an instance of "obj_wall." If we would, then it carries out the code contained in the curly brackets {}. We will now know there's gonna be a collision, but we want to still move in that direction as much as we can without hitting the wall. We need to stop with a gap between our player and the wall, so to do this we have to use a "while loop" that moves us one pixel at a time towards the collision and then stop just before we would hit it. I should of explain that the sign "sign" function returns one or a negative one depending on whether the variable is given a positive or a negative. Meaning that if we are moving to the right, "sign(hsp)" should equal one and if we're moving left then it should equal a negative one also the exclamation mark in front of the "place_meeting" represents "not." Instead of checking to see if the collision WOULD happen, but we are looking to see if it would NOT happen. This means we can translate the whole "while" line to mean: "While there is NOT a collision, one pixel in our direction of movement with obj_wall." While that condition happens to be true, we'll increase our x coordinate (moving the player object now) by one until we're right next to the wall. At which point the while condition is false and the code will carry on normally. When we're done moving as close as possible to the wall, we can set our horizontal speed to zero as we've moved as much as we can without hitting the wall and we don't want to move any further. Now that we've handled any possible horizontal collisions, we can safely commit to our movement and increase our x coordinate by whatever is left in "hsp." If there was a collision then this will be zero (we already moved as much as possible). If not, it's whatever our inputs said it should be earlier in the code. For the vertical collision, we basically do exactly same thing. 












You can see instead of typing in "gravity", "hspeed", and "vspeed" we can just put in our own variables into the code. The reason why we put in the gravity variable because we need complete control over what's going on in the game, but what are we doing here is putting in those numbers for the code into the step event.


The Player Input: Now, we have all of the variables it's time to add the step event into the "obj_player" and then create an "Execute Code" action. This is where the rest of the code go and will be executed by the player object on every single frame; however, the first thing to do is creating the player's inputs at the start of the frame. If your wondering like "What keys should we pressed or currently being pressed?" 

The code above is basically the same thing except "keyboard_check" will return a one or a zero, but it depends on if the key is in the brackets that's being pressed. By the way, you can replace "vk_right" and "vk_left" with the "A" and the "D" keys or whatever letter keys you want to use. This is in the step event because the state of our keys change on every frame, but we need to know at the beginning of every frame what buttons are being pressed, though. The key left is set up to return either negative one or zero instead of a positive one or zero by putting that negative sign in front of the "keyboard_check." This is where we can add "key_right" and "key_left" together and then end up with either positive one for right, negative one for left or zero for neutral keys. That's what we need to do next. 


The Collisions:  Now, we got the easy stuff out of the way. What people get confuse is the collisions, but in order to do this we need to know how to do it and pixel perfect without using the "solid" function. Make sure your wall objects have "solid" turned off because it will cause problems later on. To detect a collision and then correct the position afterwards, but we're here to detect the collision before it can occur also adjusting our movement accordingly. Remember, at this point we've only been filling variables with numbers, "obj_player" hasn't actually moved anywhere, though. Let's handle the horizontal movement first. 

As you can see the code is basically identical, but we just need to replace the "hsp" with "vsp" and make our checks against our y coordinate as opposed to our x coordinate, then once we've dealt with any collisions, move as before. Once you've put all this together your step event.  

There you have it, a basic platform engine with pixel perfect collisions in roughly forty lines of Game Maker Language (GML) code while keeping everything full control over every movement the player makes and without using built in variables like solid and gravity. 

What did you like and dislike about the game engine? What I like about this game engine is how the interface is still the same one from Game Maker 8.1, but what I don't like about Game Maker: Studio is I feel like you have to know programming and coding in order to create games in this one. 

Did you find the game engine easy to use? I find this engine kind of easy because due to my knowledge of using the other Game Maker engine also I'm not a huge fan of the programming feature being used a lot in Studio, though. 


What sorts of improvements would you like to see done to the game engine? What improvements I would like to see done to Game Maker: Studio is when you start it up it doesn't take you straight to where you can create the sprites, objects and et cetera, but instead it just pops up a mini window with the open, new, welcome, import, release notes, demos, tutorials, news, and licenses. That's just me because I'm used to the Game Maker 8.1 or below start ups better. 

Would you consider using it for your own game? I wouldn't consider using it for my own game because I really love and feel less anxious when I'm using Game Maker 8.1 or 8.0 due to them having friendly user interfaces and having the drag and drop features in them. Also I cannot understand how to use Game Maker: Studio without using a tutorial. 

Source: 

Image Sources: 







Sunday, October 16, 2016

User Interface/User Experience Technology Tutorial: EMOTIV's EPOC+ 14 Channel Mobile EEG Neuroheadset


We all know headsets, but what if there's a way to use our brain and thoughts to do that feature. Well now we can by using Emotiv's EPOC neuroheadset which is created by Tan Le, the co-founder of Emotiv. In this tutorial there would be mention of how to use it, what it can do, and what are the requirements, setups, and mentioning it's features. I will also put down the links where I got these sources for my research. 





Features: It's easy to fit and with flexible design. EPOC is wireless and can be rechargeable with dense array spatial resolution ensuring the "whole brain" measurement. This headset has saline based wet sensors, so there would be no sticky gels and it's battery is lithium which can provide up to twelve hours of continuous use. EPOC neuroheadset is compatible with Microsoft Windows, Mac OSX, Linux, Android, and iOS software devices. The neuroheadset also provides access to Raw EEG (Electroencephalogram) data with software subscription as well as access performance metrics, mental commands, and facial expressions.

Microsoft's Windows Hardware and Software Requirements: 2.4 GHz Intel Pentium 4 processor or equivalent, Microsoft Windows XP with Service Pack 2 or Windows Vista, 1 GB RAM, 50 MB of available disk space, and one or two unused USB 2.0 ports which it all depends how many neuroheadsets you want to use at the same time.

USB Receiver Installation for Windows: Plug in the provided Emotiv USB receiver or receivers into an unused USB port on your computer device. Every receiver should be recognized and installed automatically by the computer as a USB Human Interface Device. No additional hardware drivers are required to be installed and wait a moment until your system shows the hardware is ready to be use.

Emotiv Xavier Installation for Windows Step 1: Use Windows Explorer and access the Emotiv Xavier SDK version 3.0.0.x Installer.exe or Emotiv Xavier SDK version 3.0.0.x-PREMIUM Installer.exe where you can download from Emotiv's website (https://www.emotiv.com/).

Emotiv Xavier Installation for Windows Step 2: Run either one of the installers and then an Emotiv Xaiver SDK version 3.00.x or Emotiv Xaiver SDK version 3.0.0.x-PREMIUM setup window will pop up.

Emotiv Xavier Installation for Windows Step 3: Click on the Next to start the installation process then you'll be asked to enter your first name, last name, email, key order number, and serial number key. The numbers are available from the KEY icon next to  the download button at purchase under My Purchase then enter the numbers to click Next. Once you enter the correct key order and serial key, a pop up window will appear showing you the serial key is valid and just click on the OK to go to the next step of the installation.

Emotiv Xavier Installation for Windows Step 4: If you haven't uninstalled an older version then you'll be asked to remove the older copy. Multiple copies of the Insight can coexist on the same machine, but you must be cautious when not "mix and "match" components from several installations.

Emotiv Xavier Installation for Windows Step 5: After a few seconds, an Installation Complete dialog will appear.

Emotiv Xavier Installation for Windows Step 6: Click the Finish button to complete the installation.

Apple's Mac OS X Hardware and Software Requirements: Mac OS X versions 10.5.x, 10.6.x, 10.7.x, 10.8.x, and 10.9.x, Intel-based Macintosh, 2 GB RAM, Hard disk with 500 MB available, and USB ports 2.0, but it all depends how many neuroheadsets you want to use at the same time.

USB Receiver Installation for Mac OS X: Plug in the provided Emotiv USB receiver or receivers into an unused USB port on your Mac. Every receiver should be recognized and installed automatically by the computer as a USB Human Interface Device. No additional hardware drivers are required to be installed and wait a moment until your system shows the hardware is ready to be use.

Emotiv Xavier Installation for Mac OS X Step 1: Use the Spotlight (Search Bar) to access the EmotivXaiverResearch-v3.0.0.x.pkg or EmotivXaiverResearch-v3.0.0.x-PREMIUM.pkg downloaded from Emotiv's website (https://www.emotiv.com/).

Emotiv Xavier Installation for Mac OS X Step 2: Run the EmotivXaiverResearch-v3.0.0.x.pkg or EmotivXaiverResearch-v3.0.0.x-PREMIUM.pkg file and an Install EmoXaiverResearch setup window will appear.

Emotiv Xavier Installation for Mac OS X Step 3: Click on Continue to start the application process and you will be asked to select a destination disk before clicking on the continue. Press the Install button on the installation type screen and if your Mac's password is protected, you will prompted to enter your system password to start the installation. Upon the installation, a screen will say the Installation was successful will appear then press the Close button.

 Emotiv Xavier Installation for Mac OS X Step 4: If you haven't uninstalled an older version then you'll be asked to remove the older copy. Multiple copies of the Insight can coexist on the same machine, but you must be cautious when not "mix and "match" components from several installations.

Emotiv Xavier Installation for Mac OS X Step 5: After a few seconds, an Installation Complete dialog will appear.

Emotiv Xavier Installation for Mac OS X Step 6: Click the Finish button to complete the installation. After the installation launch Emotiv Xaiver SDK by selecting Applications --> EmotivXaiverResearch --> EmotivXaiver SDK.


NOTE: Couldn't find any sources that tells anyone about the hardware and software requirements for both the Linux Operating System and iOS. 

Setting up Emotiv Xavier SDK: Now, to set up your device the set up tab is set as your default when first starting up the Emotiv Xavier SDK software. The main function of this device is to display contact quality feedback for the headset's EEG sensors provides guidance to the user who's wearing it correctly. According from Emotiv it's very important for anyone to achieve the best possible before proceeding to other tabs of the SDK software.

Setting Up Your EPOC Neuroheadset Step 1: You need to switch on the headset and confirmed that the built in battery is charged and also providing power by looking for the blue LED located near the power switch at the back of the neuroheadset. If it needs to be charge then turn off the power and plug it into the Emotiv battery charger by using the mini-USB cable which comes with the headset once you purchase it from Emotiv's website. Please allow this headset to charge for approximately fifteen minutes before attempting to try it again. Warning, do not attempt on wearing the headset while it's charging.

Setting Up Your EPOC Neuroheadset Step 2: Then verify the Wireless Signal reception is good by checking out the EPOC status area in the pane. If you see the signal status showing bad; therefore, make sure Wireless USB receiver is inserted into a USB port on your computer and the single LED is flickering very rapidly on the top half of the receiver. If the LED light is blinking slowly, remove the receiver from your computer and then reinsert it to try again. Make sure to remove any metallic objects or obstructions that's located near the neuroheadset also move it away from any devices with powerful sources of electromagnetic interference like microwave ovens.

Setting Up Your EPOC Neuroheadset Step 3: You can now put on the EPOC neuroheadset by gently pulling apart the headband and lowering the arms of the sensors onto your head from the top down which is near the rear of the skull. Slide the headset forward until the sensors is closer to the headset pivot points which are located directly above your ears, but as close to the hairline though. If you didn't adjusted the fit then the rectangular compartments on the front end of the headband, it won't feel comfortable both above and behind your ears. Also tilt the headset so that the lowest, front most sensors are symmetric onto the user's forehead and position two to two and a half above the eyebrows. Check all of the sensors are touching the head if not, fine tune the headset by gently sliding in small addition until satisfying the fit has been attained.

Setting Up Your EPOC Neuroheadset Final Step: Please repeat this for the remaining sensors until all of them have accepted contact quality.

I believe this product will be successful because if you watched the demo video (http://www.ted.com/talks/tan_le_a_headset_that_reads_your_brainwaves?language=en), it apparently works very well and if this type of headset incorporates into the gaming industry then it'll be even more successful. What I think is neat about this technology is that we carry out commands by thinking the thought while wearing it because our brains generates different kinds of brainwave patterns. This will change gaming because we always use our brains for playing video games like solving puzzles, thinking of strategies, and controlling our characters with only a keyboard and a mouse or with a controller. What if we can do all of that by just using our minds like controlling our avatars to do whatever comes up in our heads instead of using our hands to use the keyboard and mouse. Also what we're thinking while playing a game will automatically pop up onto our screen. One specific feature about this product that caught my attention is it's easy to fit with a flexible design. This feature caught my attention because when I saw the first photo of it I thought to myself "How the heck that thing is flexible?" Once I found a link to a demonstration video it blew my mind and how flexible this headset is as well as how incredible people can just slip it right onto their skulls without any problem(s). If I designing a game, I will incorporate this product to be part of a side scrolling, 8-bit, beat em up video game. I would incorporate it into that type of game because I will have users use their minds to make the characters to pick up a weapon or punch an enemy once they it on screen and the plus side the EPOC is compatible to work on both the PlayStation 3 and PlayStation 4 which is one of the consoles my video game's targeted platforms.




Website Sources for Research:

http://www.hongkiat.com/blog/next-gen-user-interface/

https://www.emotiv.com/epoc/299/

https://emotiv.zendesk.com/hc/en-us/articles/201428435-Emotiv-EPOC-Setting-up-your-Device

https://emotiv.zendesk.com/hc/en-us/articles/201428615-Emotiv-Xavier-Installation-Windows-Operating-System

https://emotiv.zendesk.com/hc/en-us/articles/201047679-Emotiv-Xavier-Installation-OSX-Operating-System

Images Sources:

https://www.emotiv.com/

https://www.youtube.com/watch?v=LZrat-VG4Ms