spritemate
1.0.0
A SpriteMate é um novo editor de Sprite para o Commodore 64. Funciona com a maioria dos navegadores modernos no Windows, Mac e Linux e é puro JavaScript e HTML - sem plugins. Todos os dados são processados apenas no lado do cliente. A Spritemate suporta a importação e exportação dos formatos de arquivo mais comuns para o Commodore 64 (por exemplo, SpritePad) e pode ser usado como visualizador e editor em quase qualquer dispositivo com um navegador.
Spritemate ainda está em desenvolvimento. Se você gosta, entre em contato;) sinta -se à vontade para enviar solicitações de puxar ou enviar idéias, bugs e solicitações na seção de problemas. Saúde!
Última versão estável: https://spritemate.com/
Versão beta: https://beta.sprritemate.com/
Vídeo de uma versão anterior: https://www.youtube.com/watch?v=n59axaeqdwe
Use npm
$ npm install
$ npm run dev
| Símbolo | Atalho | Função |
|---|---|---|
 | - | Carrega um arquivo. Formatos suportados: Spritemate (SPM), Spritepad (SPD, SPR) |
 | - | Salva um arquivo. Formatos suportados: Spritemate (SPM), SpritePad 2.0 e 1.8.1 (SPD), fonte ASM (TXT) |
 | z | Desfazer. Para quando você estragou tudo. |
 | mudança + z | Refazer. Pois quando você percebeu que não era tão ruim |
 | d | Desenhe pixels |
 | f | Preenchimento de inundação |
 | e | apagador |
 | m | mover |
| Símbolo | Atalho | Função |
|---|---|---|
 | m | Alternar entre o modo SingleColor e multicolor |
 | - | Mudar Sprite à esquerda |
 | - | Mudança de sprite à direita |
 | - | Mudança de sprite para cima |
 | - | Mudar Sprite para baixo |
 | - | Flip Sprite horizontal |
 | - | Flip sprite vertical |
 | - | Atrave o visor da grade liga/desliga |
  | - | Zooms Janela para dentro/saída |
| 1,2,3,4 | Selecione cor individual, transparente, multicolor 1 ou multicolor 2 | |
| mudança + mouse | Exclua pixel |
| Símbolo | Atalho | Função |
|---|---|---|
 | - | Alongamentos sprite horizontalmente |
 | - | Alonga Sprite verticalmente |
 | - | Sobreposição Próxima Sprite |
| - | Zooms Janela para dentro/saída |
| Símbolo | Atalho | Função |
|---|---|---|
 | - | Crie novo sprite |
 | - | Exclua Sprite selecionado |
 | - | Copie Sprite |
 | - | Paste sprite |
| - | Atrave o visor da grade liga/desliga |
| - | Zooms Janela para dentro/saída |
| Cursor esquerdo e direito | Ciclo através da Sprite List |
Inicialmente, eu queria remover a interface do usuário jQuery e jQuery deste projeto e substituí -lo por JS de baunilha. O tempo de construção cresceu para 10 segundos, o que achei bastante irritante. A replicação da funcionalidade modal do jQuery foi mais desafiadora do que o previsto, portanto, decidi excluir o jQuery do pacote JS novamente e carregá -lo do CDN. Este tempo de compilação muito reduzido para menos de 4 segundos. No geral, o aplicativo permanece extremamente pequeno, com o código principal do aplicativo em torno de 20kb e jQuery em torno de 98kb.
Observe que duas alterações foram introduzidas com o recurso de nomeação do sprite: os sprites começam com o número 0 do índice em vez de 1, por exemplo, o primeiro sprite é chamado "sprite_0" em vez de "sprite_1". Isso era necessário para a consistência e minha sanidade pessoal - internamente o número do índice sempre foi 0 em vez de 1. A outra alteração é que os dados do sprite exportados como ASM ou arquivo básico não rotulariam mais os sprites, incrementando o índice. Isso significa que um sprite manteria o nome, não importa se você o classificar na lista Sprite para uma posição diferente (o que parece óbvio, mas não era assim antes).
O recurso de nomeação do sprite é compatível com versões anteriores; portanto, quando você carrega um arquivo SPM mais antigo, os nomes padrão serão aplicados.
O sprite invertido (ou "negativo" em Spritepad) pode parecer um pouco estranho no modo multicolorido, mas isso não é um bug. Em Singlecolor, um 0 (transparente) é substituído por um 1 (pixel) e vice -versa, mas no Multicolor temos mais duas cores. O Spritemate interrompe as cores 3 e 4 neste caso, assim como o Spritepad.
Isso pode ser útil ao trabalhar com vários arquivos. Também um bom indicador se o arquivo ainda não foi salvo. Observe que, devido à natureza de como os navegadores salvam arquivos e sistemas operacionais lidam com a segurança, um arquivo pode salvar com um nome ligeiramente diferente se o mesmo nome de arquivo já existir no local de download (por exemplo, "mysprites (1) .spm" em vez de "mysprites.spm").
A barra de menus parece estar com defeito para algumas configurações, mas o problema atualmente não é reproduzível. THX2 para Leissa para testes adicionais e descobrir que desligar o "bloqueio de conteúdo" no Firefox pode resolver o problema. Se você encontrar um problema reproduzível com a barra de menus, relate a descrição aqui: https://github.com/eshahn/spritemate/issues
Este lançamento se concentra em uma melhor usuidade. Embora tecnicamente nenhum recurso tenha sido adicionado, o fluxo de trabalho geral deve estar melhor agora. Por exemplo, em vez de ter quatro ícones diferentes para mudar um sprite para cima, para baixo, para a esquerda ou direita, a nova ferramenta de movimentação permite que você faça isso mais intuitivo agora. Como efeito colateral, menos ícones complicam a interface do usuário.
A opção de apagar os pixels já estava no Spritemate antes (mantendo o 'Shift' durante o desenho), mas agora a ferramenta 'Eraser' o torna mais visível e mais fácil de usar em um fluxo de trabalho com uma mão.
Uma nova opção para duplicar um sprite foi introduzida. Isso foi anteriormente possível por uma combinação de 'cópia', 'nova' e 'pasta' (e a nova duplicata é de fato exatamente isso), mas isso deve aumentar a uma experiência mais intuitiva.
Existem outras melhorias, como o ícone de 'lixo' visualmente mais distinguível para excluir um sprite. Tudo combinado, o Spritemate deve começar a se sentir mais familiar se você estiver acostumado a outros programas de pintura, como o Photoshop.
Embora poucos recursos tenham sido adicionados, demorei um pouco para terminar este lançamento. Eu tive que reverter muito código para um novo recurso muito legal que não consegui trabalhar de maneira confiável. Por esse motivo, tive que manter duas filiais de código e recursos de backport na versão estável. Finalmente decidi colocar o novo recurso em espera e focar nos outros.
Não tive nenhuma chance de trabalhar no Spritemate por meses devido às minhas coisas comerciais sugar todo o meu tempo livre. Além disso, o feedback foi parando recentemente, o que também não me motivou muito. Eventualmente, verifiquei o tráfego para Spritemate e fiquei surpreso com a quantidade constante de usuários. Então eu decidi dedicar mais tempo a este projeto novamente. De qualquer forma, se você gosta de Spritemate, pode fazer uma diferença, informando -me, por correio (Ingo no AWSM DOT DE) ou enviando -me um tweet ( @AWSM9000). Deixe -me saber como posso melhorar a Spritemate para você!
Spritemate salva as configurações localmente agora. Pode funcionar um pouco instável e eu sei sobre pelo menos um caso em que o código funciona, mas não deve quanto ao meu entendimento (mas quem sou eu para julgar o desenvolvedor ...). De qualquer forma, a base para mais opções de configuração foi lançada para atualizações futuras.
Spritemate está agora em beta pública. Graças a todos os testadores beta que ajudaram a encontrar bugs e sugerir recursos e melhorias. Confira a documentação no GitHub para obter uma visão geral do recurso.
As ações mais comuns receberam teclas de atalho para acesso rápido. O uso das teclas de atalho em um navegador é sempre um pouco complicado, pois muitas combinações são feitas pelo navegador (como CMD/Ctrl + C para "cópia"). Portanto, alguns atalhos podem parecer menos intuitivos. Essas funções estão disponíveis pressionando as teclas agora:
(1,2,3,4) - Defina uma das quatro canetas/cores disponíveis (F) - ATRAVENDENTE A PRECISA ON/OFF (D) - Alterna entre os modos "desenhe" e "preenchimento" (z) - desfoque (shift + z) = refazer (m) - TOGLGLE SINCOLOR/MULTICOLOR (Cursor esquerdo, direita) - Naviging por meio de Sprig.
Alterna as sobreposições de sprite na janela de visualização. O sprite a seguir será usado como sobreposição. A janela de visualização mostra os sprites e a janela do editor mostra o outro sprite com visibilidade reduzida (como a pele de cebola). Observe que as informações de sobreposição de sprite atualmente são armazenadas apenas no formato nativo de spritemate.
