Jonatas Santos saywassup

Open Source and Videogames - Resources

This git include a list of programs, tools, engines and libraries free and open source intended to make videogames.

NOTE: This gist is a support material for the talk "Open Source and Videogames" given by me, Ramon Santamaria, on October 26th 2021 in Canòdrom, Barcelona. All the materials listed here were explained in detail in a +2 hours talk.

CUSTOM GAME ENGINES: A Small Study

A couple of weeks ago I played (and finished) A Plague Tale, a game by Asobo Studio. I was really captivated by the game, not only by the beautiful graphics but also by the story and the locations in the game. I decided to investigate a bit about the game tech and I was surprised to see it was developed with a custom engine by a relatively small studio. I know there are some companies using custom engines but it's very difficult to find a detailed market study with that kind of information curated and updated. So this article.

Nowadays lots of companies choose engines like Unreal or Unity for their games (or that's what lot of people think) because d

CSS units

Recommendations of unit types per media type:

Media	Recommended	Occasional use	Infrequent use	Not recommended
Screen	em, rem, %	px	ch, ex, vw, vh, vmin, vmax	cm, mm, in, pt, pc
Print	em, rem, %	cm, mm, in, pt, pc	ch, ex	px, vw, vh, vmin, vmax

Relative units

Web Performance

Requirements

You need to have the latest version of Node. Preferably, you're using 9.8.0, but the latest LTS should work as well.
You should have npx installed using npm install -g npx.
Install the React Developer Tools.

Repositories

React Best practices

I have summarized and compiled a list of React.JS best practices from various sources across the internet.

From the React docs

https://reactjs.org/docs/components-and-props.html
- props must be readonly
https://reactjs.org/docs/state-and-lifecycle.html

DOM Performance

How the browser renders the document
- Receives the data (bytes) from the server.
- Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
- Turns tokens into nodes.
- Turns nodes into the DOM tree.
Builds CSSOM tree from the css rules.

	module SpriteSheet exposing (..)

	import Math.Vector2 exposing (Vec2, vec2)
	import WebGL exposing (Texture, Shader)

	{-\|
	Render a portion of a sprite sheet.
	-}
	fragmentSpriteSheet : Shader {} { u \| spriteSheet : Texture, spriteSheetSize: Vec2, spriteSize: Vec2, index : Float } { vcoord : Vec2 }
	fragmentSpriteSheet =

	<script type="text/javascript">
	WebFontConfig = {
	google: { families: [ 'Roboto' ] }
	};
	(function() {
	var wf = document.createElement('script');
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
	'://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
	wf.type = 'text/javascript';
	wf.async = 'true';

	document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';


	function getPayload(item) {
	const kind = item.kind;
	switch (kind) {
	case 'string': return new Promise(res => item.getAsString(res));
	case 'file': return Promise.resolve(item.getAsFile());
	default: throw new Error('unknown item kind! ' + kind);
	}

	import React, { Component } from 'react';
	import { withRouter, Switch } from 'react-router-dom';
	import { TransitionGroup, Transition } from 'react-transition-group';
	import anime from 'animejs';
	import TransitionElements from './TransitionElements';

	class AnimatedRoutes extends Component {
	state = {
	location: this.props.location,
	transitioning: true,