PÁGINA DO MARCELO LA CARRETTA,


PROFESSOR DE DESIGN E TÉCNICAS AUDIOVISUAIS E PRODUTOR MULTIMÍDIA.


Marcelo La Carretta Enrique López da Cunha Pereira nasceu em 1979 em Montevidéu, Uruguai, e veio para o Brasil em 1987. Apaixonado por desenhos desde pequeno, começou a fazer quadrinhos influenciado pelos mangás japoneses do Osamu Tesuka, pelo perfil de Mauríco de Sousa e pelo humor argentino de Quino. É um 'brasiguaio' como se auto-define, pois ama tanto os dois países que fica difícil escolher. Vindo para Belo Horizonte, começou seus trabalhos como chargista em 1996, com apenas 15 anos. À medida que seu trabalho amadurecia, diagramava jornais e desenhava charges em jornais para empresas e sindicatos em geral. Foi em Cabo Frio (cidade onde viveu a maior parte da infância) que teve as ideias da maioria dos seus personagens e situações, desenvolvendo um estilo próprio.


Em 1999, já estudando na Escola de Belas Artes da UFMG, as tiras da 'Galera Brasileira', seu primeiro trabalho, enfim ganhavam vida no papel. As charges se tornavam mais ácidas e fortes, influência do avô, o importante jornalista mineiro Carlos Olavo da Cunha Pereira, exilado político (daí sua origem uruguaia, aliás). O site lacarreta.com.br é lançado em 2000, com a publicação de charges e tiras semanais. O traço ganha mais expressividade com o passar dos anos, e em 2001 adota como parceiros inseparáveis o nanquim pena e a aquarela. Em 2002, por ocasião de sua maior incursão pela área do cinema (principalmente montagem de filmes, animações e estudos críticos sobre conservação e restauração), deixa de publicar trabalhos semanalmente, mas não abandona de vez os cartuns, fazendo de sua página um portfólio. Em 2008, retoma seus trabalhos no impresso publicando ilustrações, outra de suas maiores paixões.


Sua principal paixão, no entanto, é lecionar. É professor na PUC Minas, e já foi professor em praticamente todas as mais importantes faculdades de Belo Horizonte. Doutor em Técnicas Audiovisuais pela UFMG, com tese sobre o papel do prossumidor na salvaguarda da memória audiovisual nas mais diversas mídias. Na vida acadêmica, foi coordenador do Núcleo de Comunicação (Estúdios TV, Rádio e Fotografia) de 2005 a 2011 na Estácio, de 2002 a 2009 foi coordenador técnico, pesquisador convidado e curador de DVDs no Projeto Filmoteca Mineira, da UFMG, de 2011 a 2013 foi coordenador do LabCom (Laboratório de Convergência Midiática) da Puc Minas em Poços de Caldas e coordenou, de 2014 a 2016, a agência ODIM (Oficina Digital de Ideias Multimídia) no curso de Produção Multimídia da Puc Minas. Colaborador nas mais diversas mídias, da internet ao cinema, de videogames ao teatro, é gamedesigner, editor de imagens, animador, videocompositor, ilustrador, designer, cartunista e pesquisador de cinema, design, Jogos Digitais e de tabuleiro. Têm diversos artigos publicados sobre o papel do prossumidor na indústria do audiovisual, em especial jogos e reflexões sobre Advergames/Serious Games. Ganhador do prêmio de melhor artigo por duas vezes no SBGames (Simpósio Brasileiro de Jogos e Entretenimento Digital), e premiado como melhor designer da etapa nacional do GameChef 2016 (concurso internacional de jogos de tabuleiro indie). http://lattes.cnpq.br/7213018736318093


Não menos importante: bem casado com a fotógrafa Adriana Ferreira, pai do Lipe e da Nina.

Um pouco do meu trabalho

Trocadilho infame, eu sei. Mas não resisti!

  • TWINE COOKBOOK

    AUTHOR: // CATEGORY: Textos

    http://twinery.org/

    Para baixar/usar o software (ele é todo baseado em html/php/css)

     

    COOKBOOK

    # Criar links/passagens
    # Abrir/descortinar texto
    # Imagens
    # Som
    # Nome Customizado
    # Box de Alerta
    # Dados
    # HUD
    # Variáveis
    # Range
    # Timer

    # Layout


    Como inserir links para as passagens (construção de árvore de opções):

    Sempre que você colocar um texto entre colchetes duplos [[  ]], automaticamente surgirá uma passagem/página nova.

    Exemplo:
    Na página, você escreve:

    E agora? 
    Você quer [[explorar a caverna]]
    Ou quer [[dar mais uma olhada?]]

    Irão surgir duas pranchas novas (ou links para as pranchas, se elas já existirem com esses nomes), com setas indicando de onde elas vieram.

    Mas, se você quiser outro nome para o link, mas direcioná-lo para uma prancha específica, é só colocar o comando assim:

    [[Você quer explorar a caverna? |CHECK POINT]]
    [[Ou quer dar mais uma olhada? |GAME OVER]]

    Na árvore de escolhas, o nome que está após o comando | será o nome da prancha. Isso evita que você tenha que colocar a palavra GAME OVER como hiperlink, por exemplo, e fazer com que o leitor saiba que está indo para um mau final.

    Lembre-se: todos os caminhos devem ter hiperlinks de navegação!
    Mas, para não criar “setinhas demais” na árvore de opções, basta colocar este comando nas páginas que não precisa ter hiperlinks em fluxo, como finais e capítulos novos:

    Exemplo:

    (link:”Começar de novo?”)[(goto:”intro”)]

    Onde “intro” seria o nome da primeira prancha da sua aventura!

    Se quiser um html de exemplo, baixe esse aqui

    # Voltar ao topo

    Abrir/descortinar texto
    Use o seguinte comando:

    Então… você opta por abrir o armário!

    (link: “abrir armário”)
    [
    Ao abrir o armário, você sofre um ataque de morcegos… fim da linha para você!
    GAME OVER
    ]

    Isso, além de aproveitar melhor a página, cria momentos de tensão para a sua história!

    # Voltar ao topo


    Como inserir imagens

    Por exemplo, inserir imagem que está no meu computador
    1 – abrir a imagem via browser; copiar o caminho da imagem
    2 – Colar assim:

    <img src=”caminho_da_imagem_dentro_do_seu_computador.png”>

    Ou, de forma mais específica (com tamanho definido, por exemplo):

    <img src=”caminho_da_imagem_dentro_do_seu_computador.png” style=”width:100px”>

    Para fazer com que a imagem seja também um link (neste caso, indo para a passagem “página 02”:

    [[<img src=”caminho_da_imagem_dentro_do_seu_computador.png”>|pagina02]]

    Se ele estiver já publicado, deve-se inserir o link da pasta de destino, ou o endereço dele na web:
    Exemplo:

    <img src=”imagens/capa.png”>

    Ou o endereço na web:

    <img src=”https://lacarreta.com.br/imagens/capa.png”>

    Note que neste caso, a imagem “capa.png” está em uma pasta organizada, e não na raiz (no caso, imagens/capa.png). tentem fazer isso de forma organizada, dessa forma.
     

    # Voltar ao topo

    SOM
    Use o seguinte comando:

    <audio src=”caminho_do_mp3.mp3″autoplay>
    </audio>

    Para colocar um som dentro de uma imagem (ao clicar nela, toca o som):

    <a href=”javascript:document.getElementById(‘darplay’).play();”><img src=”caminho_da_imagem.png”></a>
    <audio id=”darplay” src=”caminho_do_mp3.mp3″></audio>

     

    Se quiser um html de exemplo, baixe esse aqui

    # Voltar ao topo

    Como inserir um nome customizado:
    Na primeira página, coloque o seguinte código:

    (Set:$name to (prompt:”Coloque o seu nome:”, “Zezinho”))

    E, uma vez no texto, lembrar de escrever $name ao invés de um nome

    Exemplo:

    $name, o que você está fazendo aqui?

    Vira

    Zezinho, o que você está fazendo aqui?

    # Voltar ao topo

    Box de Alerta

    Use o seguinte comando:

    (alert:”Cuidado com a próxima escolha!”)

     

    # Voltar ao topo

    Dados
    Use o seguinte comando:

    Então… você rola o dado para enfrentar o monstro!
    (link:”Rolar dado”)
    [
    (set: $dado to (random: 1,6))

    O resultado do dado foi: $
    dado
    (if: $dado <=4)[Você não derrotou o monstro!]
    (if: $dado >4)[Você derrotou o monstro!](if: $dado <=4)[[[e então…|péssimo final]]]
    (if: $dado >4)[[[e então…|ótimo final]]]
    ]

    Se quiser um D20, altere o (random: 1,6) para  (random: 1,20)
    Se a sua pegada é fazer algo no estilo RPG de mesa, sua hora de brilhar é agora! =]]

     

    # Voltar ao topo

    HUD com vida, munição, dinheiro
    Tem um excelente vídeo no Youtube que explica de forma bem tranquila como implementar isso, mas, em resumo, use o seguinte comando:

    (set:$health to 100)(set:$ammo to 3)(set:$credits to 50)<b>Munição=$ammo | Vida=$health | Dinheiro=$credits</b>

    Na tela, irá aparecer na parte de cima uma HUD assim:
    Munição=3 | Vida=100 | Dinheiro=50

    Para continuar com a HUD nas outras passagens da história, basta continuar com o seguinte comando:

    <b>Munição=$ammo | Vida=$health | Dinheiro=$credits</b>

    Mas, para tirar um pouco da vida, por exemplo, basta digitar

    (set:$health to ($health-49))
    <b>Munição=$ammo | Vida=$health | Dinheiro=$credits</b>

    Para inserir opções que só aparecem depois de perder vida, por exemplo, insira:

    (set:$health to ($health-49))<b>Munição=$ammo | Vida=$health | Dinheiro=$credits</b>

    (if:$health >49)[[continua correndo|corre]]
    (if:$health <49)[[continua correndo|Game Over]]

    (notem que se o valor da vida for maior que 49, surge a 1a. opção; se a vida for menor que 49, surge o 2o. link).

    Se quiser um html de exemplo, baixe esse aqui

     

    # Voltar ao topo

    Como criar uma variável que desbloqueia novas passagens:

    Criar um item que desbloqueia novas páginas
    Por exemplo:
    Na primeira passagem, digite o seguinte comando:

    (set:$machado to false)

    Na passagem onde você encontra o machado, digite:

    (set: $machado to true)
    Encontrei um machado!

    E, na página onde você quer usar ou não o machado, coloque

    Você decide (if: $machado is true) [usar o machado!] (if: $machado is false) [forçar a fechadura:]

    (if: $machado is true) [[Abrir a porta|consegue abrir]] (if: $machado is false) [[Abrir a porta|não consegue abrir]]

    Note que a variável (usar o machado) irá surgir somente se passar pelo local onde se pega o machado; senão, somente a variável de escolha – forçar a fechadura – será vista).

    OBS.: Notem, nessa altura do campeonato, que isso aqui [ ] habilita ou não visualizar um texto;
    já isso aqui [[ ]] habilita um link para uma passagem.

    # Voltar ao topo


    Usando a mesma lógica de variáveis, mas com valores crescentes ou descrescentes, dá para fazer os famosos Dating Games
    (mudanças de valor – Range – novas possibilidades vão surgindo)!

    Por exemplo:
    Coloque este comando na primeira passagem:

    (set:$amor to 0)

    Depois, pincele pelas passagens, se ele fez algo ruim, comandos como

    (set:$amor to ($amor-2)) 

    e, se ele fez algo bom no relacionamento:

    (set:$amor to ($amor+2))

    No final deste exemplo, temos 3 finais possíveis, mas apenas uma opção surge, pela soma dos $amor das passagens:

    (if:$amor <=-1)[[E então…|péssimo final]]
    (if:$amor >=0 and $amor <=1)[[E então…|final meio ruim]]
    (if:$amor >1)[[E então…|ótimo final]]

    Se quiser um html de exemplo, baixe esse aqui

     

    # Voltar ao topo

    Como colocar um timer nas passagens:
    Por exemplo: Fizemos uma passagem com apenas um link [[clique aqui]], e caso ele não seja clicado em 9 segundos, o jogo entra automaticamente na passagem [[demorou]] :

    (set: $counter to 9)
    Clique no link abaixo…Você tem |amount>[$counter] segundos!(live: 1s)[
        (set: $counter to it – 1)
        (if: $counter is 0)[(go-to: “demorou”)]
        (replace: ?amount)[$counter]
    ]
    [[Clique aqui!]]

    Isso pode ser utilizado de forma bem interesssante em lugares onde a decisão a ser tomada precisa ter uma certa rapidez (ou aumentar a sensação de perigo/ansiedade).

    Se quiser um html de exemplo, baixe esse aqui

     

    # Voltar ao topo

    E, para fechar:
    LAYOUT
    Estamos usando o formato de layout mais novo (e famoso) do Twine, o Harlowe

    Normalmente, o layout dele é preto com texto branco… E como trocar esse layout? Podemos colocar um “código de encantamento”, como esse aqui, nas pranchas que queremos que troquem esse layout:

    (enchant:?page,(text-colour:black)+(bg:white))

    ou

    (enchant:?page,(text-colour:black)+(bg:”caminho_da_image.png”))

    Se quiser uma imagem como background.

    Falando em imagens: Infelizmente, o pessoal que fez o Harlowe “esqueceu” de colocar uma linha de comando na folha de estilos para deixar as imagens responsivas (que encolhem ou aumentam de acordo com a janela do navegador). Então, na folha de estilos do projeto de vocês, basta colar esse comando aqui:

    img {
        max-width: 100%;
        height: auto;
    }

     

    COMO COLOCAR FONTES DIFERENTES NAS PASSAGENS:

    Exemplo:

    (font:’Arial’)
    [Colocar aqui o texto todo, incluindo as opções]

    No final, ficará assim:

    Colocar aqui o texto todo, incluindo as opções

    Fontes “Web-Safe”:
    Arial (sans-serif)
    Verdana (sans-serif)
    Helvetica (sans-serif)
    Tahoma (sans-serif)
    Trebuchet MS (sans-serif)
    Times New Roman (serif)
    Georgia (serif)
    Garamond (serif)
    Courier New (monospace)
    Brush Script MT (cursive)

    Aproveitem as dicas! Ah, e novas dicas são bem vindas!

    # Voltar ao topo

Facebook // @marcelo.lacarreta

Instagram // @lacarreta