[yellowalert]A base tá prontinha, acabou de sair do forno:
https://rpgmaker.000webhostapp.com/games/html5/canvas/RMXP-CharacterMaker/
[image]
[/yellowalert]
Em navegadores mais antigos isso óbviamente não funcionará, se for IE anteriores ao Html5 só funcionaria com AtiveX (WScript talvez).
Navegadores testados que funcionou:
Mas vamos ao que existe de mais moderno na linguagem Web para ClientSide (ou seja, que não está no servidor).
Qualquer desenho ou informação gerada dentro de um canvas gera uma imagem em BASE64.
Canvas é uma tag de HTML5 usada para desenvolver variadas aplicações, inclusive criação de jogos Web sem a necessidade do Flash, UnityWeb ou SilverLight:
É possivel desenhar até com plano de fundo transparente, ou seja PNG 32-Bits.
O problema em si não é como desenhar e sim como salvar o conteúdo do desenho diretamente no seu disco com um nome prédefinido ou digitado.
Para podermos capturar a informação do CANVAS basta usar o seguinte comando:
E ele retornará a imagem e Base64 já pronta pra ser atribuida a um link ou um SRC de uma imagem:
Mas como colocar um nome prédefinido com extensão, bem a maioria dos navegadores com suporte para HTML5 permite nomear o arquivo acessado por um link:
(Isto não funcionará no Internet Explorer 11 e anteriores)
Simples não? Mas e para atribuir outro nome dinamicamente ou o conteudo do canvas dinamicamente? Agora vamos ao JAVASCRIPT.
Para enviar o valor do canvas para o HREF este link também deve ter uma ID única, assim como o canvas:
O Javascript deverá ser assim se essas IDs forem as definidas:
Se não funcionar declarar as IDs como variaveis:
Então para chamar, isso pode ser feito por um botão ou link ou tempo, vai variar do seu conhecimento ou escolha:
Para ter um exemplo pronto eu colocarei o código aqui e o arquivo HTML de exemplo em anexo:
Enfim, e no RpgMaker MV como se faz isso?
Até o momento não achei, pois as imagens deles são geradas por WebGL e não dentro do CANVAS realmente, então assim que eu descobrir repassarei aqui.
Eu sei que os únicos dois canvas que um jogo feito no RpgMV usa são os de IDs GameCanvas
e UpperCanvas.
O nosso amigo [member=1152]Hudell[/member] já descobriu e usou isso rsrs
Segue o link:
https://forums.rpgmakerweb.com/index.php?threads/orange-screenshot-saver.49560/
https://rpgmaker.000webhostapp.com/games/html5/canvas/RMXP-CharacterMaker/
[image]
[/yellowalert]
Em navegadores mais antigos isso óbviamente não funcionará, se for IE anteriores ao Html5 só funcionaria com AtiveX (WScript talvez).
Navegadores testados que funcionou:
- Mozilla Firefox (Desktop)
- Google Chrome (Desktop)
- Opera Chromium (Desktop)
Mas vamos ao que existe de mais moderno na linguagem Web para ClientSide (ou seja, que não está no servidor).
Qualquer desenho ou informação gerada dentro de um canvas gera uma imagem em BASE64.
Canvas é uma tag de HTML5 usada para desenvolver variadas aplicações, inclusive criação de jogos Web sem a necessidade do Flash, UnityWeb ou SilverLight:
Código:
<canvas></canvas>É possivel desenhar até com plano de fundo transparente, ou seja PNG 32-Bits.
O problema em si não é como desenhar e sim como salvar o conteúdo do desenho diretamente no seu disco com um nome prédefinido ou digitado.
Para podermos capturar a informação do CANVAS basta usar o seguinte comando:
Código:
id_do_seu_canvas.toDataURL()E ele retornará a imagem e Base64 já pronta pra ser atribuida a um link ou um SRC de uma imagem:
Código:
data:image/png;base64,iVBORw0KGgoAAA...Mas como colocar um nome prédefinido com extensão, bem a maioria dos navegadores com suporte para HTML5 permite nomear o arquivo acessado por um link:
Código:
<a href="seu_link_ou_arquivo" download="nome_do_arquivo.extensão">LINK</a>Simples não? Mas e para atribuir outro nome dinamicamente ou o conteudo do canvas dinamicamente? Agora vamos ao JAVASCRIPT.
Para enviar o valor do canvas para o HREF este link também deve ter uma ID única, assim como o canvas:
Código:
<canvas id="meucanvas"></canvas>
<a id="arquivo" download="">FAÇA O DOWNLOAD AQUI</a>O Javascript deverá ser assim se essas IDs forem as definidas:
Código:
function salvasImagem(a){
/*Comentário: a variavel "a" será o nome do arquivo, use aspas para chamar a função */
arquivo.download = a;
arquivo.href = meucanvas.toDataURL();
}Se não funcionar declarar as IDs como variaveis:
Código:
function salvasImagem(a){
var meucanvas = document.getElementById('meucanvas');
var arquivo = document.getElementById('arquivo');
/*Comentário: a variavel "a" será o nome do arquivo, use aspas para chamar a função */
arquivo.download = a;
arquivo.href = meucanvas.toDataURL();
}Então para chamar, isso pode ser feito por um botão ou link ou tempo, vai variar do seu conhecimento ou escolha:
Código:
salvasImagem('gráfico.png')Para ter um exemplo pronto eu colocarei o código aqui e o arquivo HTML de exemplo em anexo:
Código:
<!DOCTYPE html>
<html>
<head>
<title>Gerar e salvar imagem com CANVAS</title>
<meta charset="UTF-8">
<script>
function iniciarExemplo(){
var c = document.getElementById("meucanvas");
var ctx = c.getContext("2d");
// Criar Gradiente
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Efeito
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
}
function salvarImagem(a){
var meucanvas = document.getElementById('meucanvas');
var arquivo = document.getElementById('arquivo');
/*Comentário: a variavel "a" será o nome do arquivo, use aspas para chamar a função */
arquivo.download = a;
arquivo.href = meucanvas.toDataURL();
}
</script>
</head>
<body onload="iniciarExemplo()">
<canvas id="meucanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Seu navegador não suporta CANVAS</canvas>
<hr>
<a id="arquivo" download="nome_do_arquivo.extensão" onclick="salvarImagem('exemplo.png')">FAÇA O DOWNLOAD AQUI</a>
</body>
</html>Enfim, e no RpgMaker MV como se faz isso?
Até o momento não achei, pois as imagens deles são geradas por WebGL e não dentro do CANVAS realmente, então assim que eu descobrir repassarei aqui.
Eu sei que os únicos dois canvas que um jogo feito no RpgMV usa são os de IDs GameCanvas
e UpperCanvas.
O nosso amigo [member=1152]Hudell[/member] já descobriu e usou isso rsrs
Segue o link:
https://forums.rpgmakerweb.com/index.php?threads/orange-screenshot-saver.49560/
