;(function() { window.createMeasureObserver = (measureName) => { var markPrefix = `_uol-measure-${measureName}-${new Date().getTime()}`; performance.mark(`${markPrefix}-start`); return { end: function() { performance.mark(`${markPrefix}-end`); performance.measure(`uol-measure-${measureName}`, `${markPrefix}-start`, `${markPrefix}-end`); performance.clearMarks(`${markPrefix}-start`); performance.clearMarks(`${markPrefix}-end`); } } }; /** * Gerenciador de eventos */ window.gevent = { stack: [], RUN_ONCE: true, on: function(name, callback, once) { this.stack.push([name, callback, !!once]); }, emit: function(name, args) { for (var i = this.stack.length, item; i--;) { item = this.stack[i]; if (item[0] === name) { item[1](args); if (item[2]) { this.stack.splice(i, 1); } } } } }; var runningSearch = false; var hadAnEvent = true; var elementsToWatch = window.elementsToWatch = new Map(); var innerHeight = window.innerHeight; // timestamp da última rodada do requestAnimationFrame // É usado para limitar a procura por elementos visíveis. var lastAnimationTS = 0; // verifica se elemento está no viewport do usuário var isElementInViewport = function(el) { var rect = el.getBoundingClientRect(); var clientHeight = window.innerHeight || document.documentElement.clientHeight; // renderizando antes, evitando troca de conteúdo visível no chartbeat-related-content if(el.className.includes('related-content-front')) return true; // garante que usa ao mínimo 280px de margem para fazer o lazyload var margin = clientHeight + Math.max(280, clientHeight * 0.2); // se a base do componente está acima da altura da tela do usuário, está oculto if(rect.bottom < 0 && rect.bottom > margin * -1) { return false; } // se o topo do elemento está abaixo da altura da tela do usuário, está oculto if(rect.top > margin) { return false; } // se a posição do topo é negativa, verifica se a altura dele ainda // compensa o que já foi scrollado if(rect.top < 0 && rect.height + rect.top < 0) { return false; } return true; }; var asynxNextFreeTime = () => { return new Promise((resolve) => { if(window.requestIdleCallback) { window.requestIdleCallback(resolve, { timeout: 5000, }); } else { window.requestAnimationFrame(resolve); } }); }; var asyncValidateIfElIsInViewPort = function(promise, el) { return promise.then(() => { if(el) { if(isElementInViewport(el) == true) { const cb = elementsToWatch.get(el); // remove da lista para não ser disparado novamente elementsToWatch.delete(el); cb(); } } }).then(asynxNextFreeTime); }; // inicia o fluxo de procura de elementos procurados var look = function() { if(window.requestIdleCallback) { window.requestIdleCallback(findByVisibleElements, { timeout: 5000, }); } else { window.requestAnimationFrame(findByVisibleElements); } }; var findByVisibleElements = function(ts) { var elapsedSinceLast = ts - lastAnimationTS; // se não teve nenhum evento que possa alterar a página if(hadAnEvent == false) { return look(); } if(elementsToWatch.size == 0) { return look(); } if(runningSearch == true) { return look(); } // procura por elementos visíveis apenas 5x/seg if(elapsedSinceLast < 1000/5) { return look(); } // atualiza o último ts lastAnimationTS = ts; // reseta status de scroll para não entrar novamente aqui hadAnEvent = false; // indica que está rodando a procura por elementos no viewport runningSearch = true; const done = Array.from(elementsToWatch.keys()).reduce(asyncValidateIfElIsInViewPort, Promise.resolve()); // obtém todos os elementos que podem ter view contabilizados //elementsToWatch.forEach(function(cb, el) { // if(isElementInViewport(el) == true) { // // remove da lista para não ser disparado novamente // elementsToWatch.delete(el); // cb(el); // } //}); done.then(function() { runningSearch = false; }); // reinicia o fluxo de procura look(); }; /** * Quando o elemento `el` entrar no viewport (-20%), cb será disparado. */ window.lazyload = function(el, cb) { if(el.nodeType != Node.ELEMENT_NODE) { throw new Error("element parameter should be a Element Node"); } if(typeof cb !== 'function') { throw new Error("callback parameter should be a Function"); } elementsToWatch.set(el, cb); } var setEvent = function() { hadAnEvent = true; }; window.addEventListener('scroll', setEvent, { capture: true, ive: true }); window.addEventListener('click', setEvent, { ive: true }); window.addEventListener('resize', setEvent, { ive: true }); window.addEventListener('load', setEvent, { once: true, ive: true }); window.addEventListener('DOMContentLoaded', setEvent, { once: true, ive: true }); window.gevent.on('allJSLoadedAndCreated', setEvent, window.gevent.RUN_ONCE); // inicia a validação look(); })();
  • AssineUOL
Caio Yo/UOL

Videogame desde cedo

São 8h da manhã, e cerca de 20 crianças de baixa renda que moram no bairro de Pirituba, na Zona Norte de São Paulo, já estão em uma sala de aula equipada com computadores. Elas têm entre 9 e 14 anos e são loucas por jogos como "Fortnite" e "Free Fire", mas aqui a programação é outra. As crianças estão aprendendo a criar jogos usando o programa RPG Maker.

Se elas escolherem continuar nesse caminho de desenvolvimento de games, não será nada fácil: falta de equipamentos, pouco o a tecnologias e capacitação, oportunidades escassas no mercado e outras mil dificuldades por serem de uma região periférica.

A boa notícia é que ali mesmo eles têm exemplos de superação. Na periferia de São Paulo, desenvolvedores de games se organizam de forma independente para criar jogos que trazem influências de onde vivem. São manos e minas da quebrada que têm muito o que falar e mostrar por meio dos videogames.

Estúdio Game e Arte

"Eu tenho uma missão e não vou parar"

Tainá Felix, 29, e Jaderson Souza, 35, são dois desenvolvedores de jogos que cresceram também nas periferias da Zona Norte de São Paulo. Ele na Vila Zilda e ela, na Vila Iorio.

Uma vez por mês, eles dão aulas de criação de games em um Centro para Crianças e Adolescentes no Jardim Maristela, em São Paulo. Com o programa RPG Maker aberto nos computadores e com um tempo limitado de uma hora, os professores mostram como pode ser fácil para as crianças fazerem jogos simples só com um editor de mapas. Nas próximas aulas, vão começar a criar personagens. Até o final do ano, devem ter um jogo completo, de autoria própria.

Foi com o RPG Maker, aliás, que Tainá e Jaderson desenvolveram os dois games que lançaram como estúdio Game Arte: "A Nova Califórnia" (baseado no conto de Lima Barreto de mesmo nome) e "Amora". Ambos estão disponíveis no Steam, mas eles não pretendem criar o próximo Battle Royale de sucesso, muito menos o próximo jogo da moda que vai estar nos trending topics do Twitter.

O interesse deles está na criação de games como reflexo da vivência da periferia e de falar para aqueles que vivem nela. "Não é criar o próximo 'GTA', é criar algo relacionado ao seu bairro, ao que se vive", conta Jaderson.

Como obstáculos nessa quest dos dois estão os problemas sociais e dificuldade de o à cultura que a população periférica tem no dia-a-dia. De acordo com os dados da pesquisa Mapa da Desigualdade 2018, elaborada pelo Rede Nossa São Paulo, quando mais periférica é a região, pior é a qualidade de educação e cultura. Por exemplo, 53 dos 96 distritos da capital paulista não possuem nenhum tipo de centro ou espaço cultural.

André Lucas/UOL

"Tem que pagar">

Publicado em 10 de junho de 2019.

Direção de Arte: Elias Fernandes; Edição: Renato Bueno; Ilustrações: Caio Yo; Texto: Bruno Izidro;