Skip to content

Instantly share code, notes, and snippets.

View brendansparrow's full-sized avatar
💭
Available for remote work

Brendan Sparrow brendansparrow

💭
Available for remote work
9 followers · 18 following
View GitHub Profile
@brendansparrow
brendansparrow / Social Sharing Links
Created March 17, 2021 15:40 — forked from markodenic/Social Sharing Links
@brendansparrow
brendansparrow / _breakpoints.scss
Created February 15, 2021 21:13
Sass breakpoint mixins
@mixin for-phone-only {
@media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
@brendansparrow
brendansparrow / 2D-player.js
Created October 17, 2019 13:17
Player class for a 2D platformer in Phaser
/**
* A class that wraps up our 2D platforming player logic. It creates, animates and moves a sprite in
* response to WASD/arrow keys. Call its update method from the scene's update and call its destroy
* method when you're done with the player.
*/
export default class Player {
constructor(scene, x, y) {
this.scene = scene;
// Create the animations we need from the player spritesheet
@brendansparrow
brendansparrow / spawn.js
Created October 15, 2019 03:21
Add spawn point in Phaser 3
// First add object layer via Tiled, then
const spawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");
player = this.physics.add.sprite(spawnPoint.x, spawnPoint.y, "atlas", "player-front");
@brendansparrow
brendansparrow / arcade-physics.js
Created October 15, 2019 03:13
Add arcade physics to Phaser
const config = {
// ...
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 } // Top down, so no gravity
}
}
};
@brendansparrow
brendansparrow / collisions.js
Created October 15, 2019 03:04
Setting collisions in Phaser 3
// setCollision - sets collision on the given tile or tiles within a layer by index
world.setCollision(2); // single tile index
world.setCollision([4,5,6,7,8,12,13,14,15]; // an array of tile indexes
// setCollisionBetween
world.setCollisionBetween(8,96) // start index, stop index
// setCollisionByExclusion
world.setCollisionByxclusion(18,24,54); // An array of tiles to exclude from collisions
@brendansparrow
brendansparrow / sloped-tilemap-collider.js
Created October 15, 2019 01:37
createSlopedTiledMapCollider function for Phaser 3
function createSlopedTilemapCollider(upwardSlopes, downwardSlopes) {
return function(sprite, tilemapLayer, collideCallback, processCallback, callbackContext) {
this._mapData = tilemapLayer.getTiles(sprite.body.x, sprite.body.y, sprite.body.width, sprite.body.height, true);
if (this._mapData.length === 0) {
return;
}
for (var i = 0; i < this._mapData.length; i++) {
var tile = this._mapData[i];
var slopeDistanceFromTileTop = 0;
if (upwardSlopes.indexOf(tile.tile.index) >= 0 && sprite.body.right < tile.right) {
@brendansparrow
brendansparrow / random-numbers.js
Created October 11, 2019 15:20
Random numbers in vanilla javascript
// Math.random()
var rand = Math.random();
console.log(rand); // Logs something like: 0.45689123537939636
// Math.random() * n
var randomPower = function(pow) {
return Math.random() * pow;
};
var rand100 = randomPower(100);
console.log(rand100); // Logs something like 50.48097086345
@brendansparrow
brendansparrow / phaser-sprite.js
Created October 11, 2019 01:32
Add an animated sprite in Phaser
// In preload function
this.load.spritesheet('player',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
// In create function
player = this.physics.add.sprite(100, 450, 'player');
@brendansparrow
brendansparrow / tilemap-from-array.js
Created October 7, 2019 04:03
3 ways to load tilemaps in Phaser
const config = {
type: Phaser.AUTO,
parent: "phaser-example",
width: window.innerWidth,
height: window.innerHeight,
scene: {
preload: preload,
create: create,
update: update
}