Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Tutorial: Using Game Controllers on KA!!!
ID	4821662713200640
Created	3 years ago, 1627697452934
Updated	8 months ago, 1714329455893
Code	/ DISCLAIMER: this project falls into a grayish area of KA's project guidlines because is requires access to the 'navigator' object (outside the pjs enviornment) / /* Accessing gamepads (controllers) in PJS !!! in this tutorial I will explain how to create a square that is controlled by your ps4/xbox controller (it should work with MOST others but not gaurenteed) it is actually much simpler than it sounds so dont worry :) NOTE: to connect a controller plug it in (if it isnt) and then press a button on it to give the page access to it OTHER NOTE: if your browser is not up to date this program will most likely not work. / textAlign(CENTER, CENTER); textFont(createFont('fantasy'), 30); noStroke(); rectMode(CENTER);//set rects to be drawn from the center /* if you dont understand these two functions, dont worry you can simply copy/paste them into your program :) */ //accesing the navigator object where the getGamepad function is var navigator = (function(){ return this.navigator; })(); function controllers(){ //for cross browser compatability, basicly checks weather the browser is using webkit so that it can call the correct function return navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : navigator.getGamepads(); } //lets create a simple object to store the info on the player var player = { x: 200,//position of the player on the x axis y: 200,//position of the player on the y axis speed: 5,//speed of the player size: 30,//size of player color: color(50, 150, 255),//color of the player }; //loop next draw = function() { background(255);//you should know what this is :P //now the fun part (and the whole point of this tutorial) var gamepads = controllers();//get a list of controllers, this will always return an array with FOUR (4) items. one for each of the four controllers that can be connected at once // it will look like this with no controllers connected // [null, null, null, null] // // like this with one // [[gamepad Object], null, null, null] // // etc. // // each "gamepad Object" contains two important proporties, .axes and .buttons // // [controller].axes will return an array with four numbers [x1, y1, x2, y2] // (all four numbers are always between -1 and 1) // // x1, y1 = stick-1's x and y // // x2, y2 = stick-2's x and y // // [controller].buttons will return an array of your controllers buttons, to check // if a button is pressed: // [controller].buttons[button index].pressed (either false or true) // //we'll use the first controller in the array var c = gamepads[0]; // if the controller is null it means nothing is pluged in OR the controller has not been initiated (occours when button is pressed) if (c === null){ //display a prompt for the user if controller is not detected fill(0); textSize(20); text('Please Insert Controller\nand press a button', 200, 200); } else { // if the controller isnt null we're good to go! //there will always be a super tiny offset even when the joysticks are centered. usally the offset will be too small to worrry about (for me: 0.0000152587890625 :P) // x axis on joystick 1 // \| // v player.x += c.axes[0] player.speed; player.y += c.axes[1] * player.speed; // ^ // \| // y axis on joystick 1 fill(player.color);//set the color to our players color! // if A/X button is pressed make the player black // just to show that buttons work :) if(c.buttons[0].pressed){// if button 0 (A on xbox X? on ps) fill(0); } rect(player.x, player.y, player.size, player.size);//draw the player as a rect // thats it!! simple right! :D ...or did i over complicate it... hehe... } //text fill(0); textSize(60); text('[Tutorial]', 200, 50); textSize(30); text('Use Game Controllers on KA!!!\nCode For More Info', 200, height-50); textSize(12); //thumbnail if(keyCode === 32){ textSize(150); rotate(-50); text('🎮', 21, 333); resetMatrix(); } }; //mdn refrance: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getGamepads //thanks for reading =D
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP2p7ajICAw
Votes	43
Spin-Offs	1
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	WalkWorthy
Author Name	PowerCoder
Author ID	kaid_572162445297461577426497
Author Profile Access	COACH

Archive Data

Added	8 months ago, 1714329481226
Updated	8 months ago, 1714329481226
Source Deleted	unknown