#randompointer | Explore Tumblr posts and blogs

codeofelm · 6 years ago

Text

Day 7 - Unity - Randomness in games

Something a little different today. No more Unity editor talk (for now). Today we look at how we might approach simple randomness from within Unity. This one is particularly relevant to Companion.

There are a few ways to deal with random items, as listed by Unity.

Choosing a Random Item from an Array

In the most simplest form, to pick an array element at random would require us to choose a random integer from zero and the array’s maximum index value. If you had 5 arrays, the max would be 4.

For this we would use the Random.Range function.

var element = myArray[Random.Range(0, myArray.Length)];

Choosing Items with Different Probabilities

Sometimes you may want some items to be more likely to come up than others. This is a method we will likely use in Companion.

In script, this would be an array of floats that contain different probabilities for the items in order. The randomness is obtained by multiplying the Random.value by the total of all floats in the array. (They don’t need to add up to 1).

To find which array element the point is “in”, firstly check to see if it is less than the value in the first element. If so, then the first element is the one selected. Otherwise, subtract the first element’s value from the point value and compare that to the second element and so on until the correct element is found.

float Choose (float[] probs) {

float total = 0;

foreach (float elem in probs) { total += elem; }

float randomPoint = Random.value * total;

for (int i= 0; i < probs.Length; i++) { if (randomPoint < probs[i]) { return i; } else { randomPoint -= probs[i]; } } return probs.Length - 1; }

Changing the line

if (randomPoint < probs[i])

to a less than or equal test would avoid the extra return statement, but allow items with a zero probability to be chosen.

Shuffling a List

Another common approach is to shuffle a list, like a deck of cards and then draw them out.

void Shuffle (int[] deck) { for (int i = 0; i < deck.Length; i++) { int temp = deck[i]; int randomIndex = Random.Range(0, deck.Length); deck[i] = deck[randomIndex]; deck[randomIndex] = temp; } }

Choosing from a Set of Items Without Repetition

Sometimes we might want these items to be randomly picked, without repetition. This can be done by iterating through the items in sequence, and deciding whether or not it is added to the chosen set. As each item is visited, the probability of it being chosen is equal to the number of items still needed divided by the number of items left to choose from.

Lets say we had 10 demon Girls in our class, but only 5 of them should spawn. It might look a little something like this.

Transform[] demonGirls;

Transform[] ChooseSet (int numRequired) { Transform[] result = new Transform[numRequired];

int numToChoose = numRequired;

for (int numLeft = demonGirls.Length; numLeft > 0; numLeft--) {

float prob = (float)numToChoose/(float)numLeft;

if (Random.value <= prob) { numToChoose--; result[numToChoose] = demonGirls[numLeft - 1];

if (numToChoose == 0) { break; } } } return result; }

In this example, we randomly select the girls, but they are still in the order of their original array. We may want to shuffle the array of girls, as seen in the previous deck example to avoid predictability.

Companion application

Companion will most likely make use of a combination of all of this. Our events will be shuffled, without repetition and uses weighted probability. There will also be a few extras like prerequisites, but we’ll get to that at another date.

#Unity3D #Companion #indiedev #learning #tutorial #dailyjournal #gamedev #visual novel #2D #randomness #tips #scripting

4 notes · View notes

arbitrary-fascinations · 2 years ago

Text

let's code a snake game

are you new to coding and wanna learn how to code a very simple browser game? this is about the simplest game i can think of. hopefully this will leave you feeling like making browser games is something you can take on. in this post i won't worry about beautiful graphics, sound, or carefully organizing your code. that can come later. let's just get something working, and we can be proud of that.

i'll assume you know basic html and basic javascript. if you want further explanation, let me know!

you can find all the code and try it out yourself here: https://codepen.io/arbitrary-fascinations/pen/mdGVrZj

first, let's make the html. create a file called snake.html and copy the html from the codepen. (it was previously listed here, but the rich text editor doesn't play nice with html listings)

our code will use the canvas element to render the game, and the output element to display the current score.

now for the javascript. let's do this one small step at a time.

first, let's make sure we can track the score:

let score const output = document.querySelector('output') function setScore(newScore) { score = newScore output.value = `score: ${score}` }

excellent. now, let's think about the game itself. we have a grid, on which a snake can move around and eat apples. the apples and the snake's body align to the grid. let's define the grid:

const canvas = document.querySelector('canvas') const gridPixels = parseInt(canvas.dataset.grid) const gridWidth = canvas.width / gridPixels const gridHeight = canvas.height / gridPixels const inGrid = ({x, y}) => 0 <= x && x < gridWidth && 0 <= y && y < gridHeight

we're using canvas.width, canvas.height, and canvas.dataset.grid to define the size of the grid, so that if we want to change the size, we only have to change one place, the html file.

because of how the canvas drawing API works, it will be most straightforward to think of the top left corner of the grid as (0, 0), with x values increasing to the right, and y values increasing downwards. this takes some getting used to since usually in math class we draw graphs with y values increasing upwards. we could code around this, but for now, the goal is to keep the code as simple as possible.

the snake will be an array of x,y points, but we will initialize it in a function later on to avoid repetition.

let snake

we also have to keep track of which direction the snake's head is moving. it should be easy to create a new location for the snake's head based on the old location and a direction, so let's store the direction as the difference between the old coordinate and the new one for both x and y, or dx and dy for short.

let dx, dy

next we'll want a way to see if a given point is inside the snake. this will be useful for checking if the snake has hit itself, and also to make sure when we generate a random location for the next apple, it isn't inside the snake. we can use the Array type's some method for this.

const inSnake = ({x, y}) => snake.some(point => point.x === x && point.y === y)

making good progress! next we need to keep track of the apple, and we need a way to generate a new location for the apple once it has been eaten.

let apple

when choosing a place for the next apple, we need to keep generating new locations until we find one that is not on the snake.

const randomLessThan = max => Math.floor(Math.random() * max) const randomPoint = () => ({ x: randomLessThan(gridWidth), y: randomLessThan(gridHeight) }) function moveApple() { do { apple = randomPoint() } while (inSnake(apple)) }

now we need a way to move the snake. but when we move the snake, it might hit itself or a wall and end the game, so first we need to track whether the game is in progress:

let playing = false

to move the snake, we look at the first element of the snake, and use dx and dy to find the next head location. then we need to see if that location would hit the snake or a wall. if it does, then the game is over. otherwise, if the next head location is the same as the apple, the snake should eat the apple and grow, and the apple needs to be moved. finally, if the snake did not grow, we need to remove its last segment.

const turns = [] function moveSnake() { if (turns.length > 0) { const turn = turns.shift() dx = turn.dx dy = turn.dy } const head = { x: snake[0].x + dx, y: snake[0].y + dy } if (!inGrid(head) || inSnake(head)) { output.value(`final score: ${score}. press space to try again.`) playing = false } else { snake.unshift(head) if (head.x === apple.x && head.y === apple.y) { setScore(score + 1) moveApple() } else { snake.pop() } } }

the turns array is a queue of new directions the snake should go in, which will be added to whenever the player presses a direction key (up/down/left/right or WASD). the reason for putting these directions in an array instead of directly assigning to dx and dy is that if the player tries to turn around within one tick of the game, if we directly assign to dx and dy, the snake will simply reverse direction and hit itself, causing game over, which will be confusing and frustrating to the player. instead, when the player presses a direction key, we push a direction into the list of turns, and then we process one turn per tick of the game.

next, we get to the part that feels more like a game: rendering the game to the screen. first, we get access to the canvas api:

const context = canvas.getContext('2d')

when rendering, we want to make sure we don't see previous frames interfering with the current frame. so to start, we need to draw a background to erase the previous frame:

function drawBackground() { context.fillStyle = 'white' context.fillRect( 0, 0, gridWidth * gridPixels, gridHeight * gridPixels) }

next, we need to actually draw our snake. let's keep things simple and draw each segment as a green square.

function drawSnake() { context.fillStyle = 'green' snake.forEach(({x, y}) => context.fillRect( x * gridPixels, y * gridPixels, gridPixels, gridPixels)) }

and to finish the render, we need to draw the apple. let's draw the apple as a red circle. annoyingly, drawing a circle is a bit complicated in the canvas api. we need to create a path, add an ellipse to that path, and fill the path. the ellipse needs an x center, a y center, an x radius, a y radius, an angle describing how much of the ellipse to draw, an angle describing where to start drawing the ellipse, and an angle describing where to stop drawing the ellipse.

function drawApple() { context.fillStyle = 'red' const radius = gridPixels / 2 context.beginPath() context.ellipse( apple.x * gridPixels + radius, apple.y * gridPixels + radius, radius, radius, 2 * Math.PI, 0, 2 * Math.PI) context.fill() }

now let's call all those in one render function:

function render() { drawBackground() drawSnake() drawApple() }

we're getting close! we need a main game loop to run every tick of the game while playing (adjust the second setTimeout argument to make the game run faster or slower):

function gameLoop() { moveSnake() render() if (playing) { setTimeout(gameLoop, 300) } }

so close! we need initialization code to set up a new game when the player first starts playing and when they start over after failing.

function newGame() { const gridCenterX = Math.floor(gridWidth / 2) const gridCenterY = Math.floor(gridHeight / 2) snake = [ {x: gridCenterX, y: gridCenterY + 0}, {x: gridCenterX, y: gridCenterY + 1}, {x: gridCenterX, y: gridCenterY + 2}, {x: gridCenterX, y: gridCenterY + 3} ] dx = 0 dy = -1 moveApple() setScore(0) }

and some code to start the game running either at the beginning or after game over:

function playGame() { newGame() playing = true gameLoop() }

and finally, let's deal with player input:

window.addEventListener('keydown', e => { if (playing) { switch (e.code) { case 'KeyW': case 'ArrowUp': turns.push({dx: 0, dy: -1}) break case 'KeyA': case 'ArrowLeft': turns.push({dx: -1, dy: 0}) break case 'KeyS': case 'ArrowDown': turns.push({dx: 0, dy: 1}) break case 'KeyD': case 'ArrowRight': turns.push({dx: 1, dy: 0}) break default: break } } else if (e.code === 'Space') { playGame() } })

we are done! try it out yourself locally! you did it! now try tweaking various things and see if you can predict what will happen.

#tutorial #game #coding #javascript

0 notes