Ligando pontos - carregar imagens e design

Olá, moçada! Cá estou eu em mais um projeto educativo. Vi que na escolinha do meu menino eles usam muito aquele joguinho de ligar pontos pra ensinar matemática. Jogando ele, parece muito bobo, mas ver o menino jogar a gente nota que a sequência numérica é fortemente trabalhada.
Então baixei umas imagens da internet, copiei as coordenadas dos pontos, apaguei eles da imagem original e bolei uma engine de clicar-arrastar-soltar. Tenho um monte de dúvidas, vamos começar com a parte técnica.

Carregando Imagens
Na engine que eu bolei, eu preciso entrar com as coordenadas de cada um dos pontos manualmente. Não tem como o computador adivinhar onde é pra colocar os objPonto. E também preciso entrar com o número de pontos (pro computador saber quando terminou a imagem). Então pensei em criar arquivos de texto pra serem lidos pelo objControle, com esses dados. Um exemplo de um desses arquivos é isso aqui:

Código:

var i; i = 0;

px[i] = 307; py[i] = 191; i += 1;
px[i] = 350; py[i] = 222; i += 1;
px[i] = 355; py[i] = 299; i += 1;
px[i] = 346; py[i] = 345; i += 1;
px[i] = 335; py[i] = 382; i += 1;
px[i] = 310; py[i] = 416; i += 1;
px[i] = 321; py[i] = 456; i += 1;
px[i] = 295; py[i] = 496; i += 1;
px[i] = 232; py[i] = 513; i += 1;
px[i] = 175; py[i] = 494; i += 1;
px[i] = 155; py[i] = 451; i += 1;
px[i] = 169; py[i] = 418; i += 1;
px[i] = 134; py[i] = 372; i += 1;
px[i] = 129; py[i] = 331; i += 1;
px[i] = 130; py[i] = 272; i += 1;
px[i] = 153; py[i] = 209; i += 1;
px[i] = 191; py[i] = 181; i += 1;
px[i] = 238; py[i] = 174; i += 1;

nPontos = i;

Uma dúvida é como associar o arquivo de texto à imagem. Pensei em colocar sempre o mesmo nome no arquivo e na imagem, o que parece funcionar. Mas gostaria de saber se alguém tem alguma idéia melhor.

Outra dúvida: pra definir as coordenadas dos pontos, eu tenho feito o seguinte: abro a imagem no paint, passo o mouse sobre o ponto, leio o valor das coordenadas (elas aparecem na base da tela) e anoto no excell, que vai concatenar o texto com os nomes das variáveis e deixar da forma acima. Depois, num arquivo padrão com os textos "var i; i = 0;" e "nPontos = i", eu colo o resultado do excell no meio dos dois. Meio trabalhoso, também gostaria de uma solução mais rápida.

Por fim, o mais complicado. Estou trabalhando num loader que vai fazer o seguinte: vai ler todos os arquivos de coordenadas, vai verificar se tem um arquivo de imagem (em qualquer extensão importável) associado a ele e vai colocar a imagem numa lista, em ordem alfabética. Daí, ele vai mostrar uma janela com todas as imagens escaladas pra ocupar um quadrado de tamanho fixo, com o nome da imagem abaixo dela, sem a extensão e com uma barra de rolagem à direita, pro caso de haverem mais imagens do que cabem na tela. O jogador vai poder escolher uma imagem, que será destacada e carregá-la, pra ligar os pontos através de um clique duplo ou selecionando-a e apertando o botão "jogar", localizado em algum lugar fora dessa janela (ainda não bolei o design). Não sei como fazer nada disso. Se alguém tiver uma engine, eu quero. Mas enquanto isso, vou tentando (se conseguir bolar por conta própria, eu posto a engine aqui!).

Design
Ainda restam as dúvidas de como mostrar isso na tela e de como será a jogabilidade! Atualmente, eu estou usando o draw pra desenhar os pontos, com os números próximos a eles. Aí, no ponto que atualmente está sendo usado eu desenho um círculo em volta e, quando o jogador está desenhando a linha a partir dele, eu desenho um círculo no próximo ponto. Quando o último ponto é desenhado, aparece a mensagem "fim". O jogador clica no ponto certo pra começar a desenhar a linha, que segue o mouse até o jogador soltar o clique. Se ele soltar no lugar certo, a linha fica sendo desenhada e o ponto a começar passa a ser o próximo ponto.

- Devo permitir que simplesmente arrastar o mouse pelo ponto correto complete o trecho ou mantenho a obricação de soltar e clicar novamente? É mais fácil jogar só arrastando, mas fico com medo disso tirar o valor educacional do jogo, porque o jogador pode clicar no primeiro ponto e sair balançando o mouse pela tela.
- Que efeitos eu devo usar e em que eventos?
- Especificamente no evento de acertar o último ponto, qual efeito devo usar? Nesse caso, preciso de algo mais chamativo.
- Devo dar alguma dica de qual o próximo ponto a ligar (como o círculo atualmente desenhado) ou isso tira o valor educativo do jogo?
- Devo criar um sistema de organização das imagens a carregar em função do número de pontos de cada uma? Ou só ordem alfabética é suficiente? Ou nem precisa ordem nenhuma?

Eu também nunca imaginei que um jogo tão bobo pudesse gerar tantas dúvidas...

ideia para os graficos:
Voce pode usar um objeto circular com uma cor chamativa e bastante blur em alpha, usar uns efeitos (pode ser os pre programados) ao mover.
Podera sair um son que fica mais fino a cada ponto e no final sair uma nota bem alta e um efeito que anda do primeiro ponto ate o ultimo rapidamente, dai a imagem aparece rapida e gradativamente.
E o mouse deve ser arrastado ate o final do desenho, se nao a linha desaparece.

Rodrigo Santiago escreveu:Voce pode usar um objeto circular com uma cor chamativa e bastante blur em alpha, usar uns efeitos (pode ser os pre programados) ao mover.

Não entendi muito bem... Esse objeto seria nos pontos? Um círculo não muito bem definido, é isso? E seria em que situação, o tempo todo, no ponto atual e no próximo ou só no atual?
Esses efeitos que você está dizendo são as partículas? Até que é uma boa, usar umas faíscas saindo ao longo da linha que está sendo desenhada... Aí, ao acertar cada ponto, eu dou um "burst" no traçado inteiro!

Também estou pensando em fazer o número do ponto recém-completo aparecer ocupando a tela toda, nesse evento de acertar um ponto, com alpha e escala aumentando, o que acha?

Rodrigo Santiago escreveu:Podera sair um son que fica mais fino a cada ponto e no final sair uma nota bem alta e um efeito que anda do primeiro ponto ate o ultimo rapidamente, dai a imagem aparece rapida e gradativamente.

Eu estava com medo de alguém sugerir esse lance do som... até pensei a respeito, mas não sei como fazer. Tinha descartado a idéia, mas parece boa demais pra ser desperdiçada, já que você também pensou nela. É, hora de voltar pro manual...
Essa da imagem aparecer gradativamente, eu cheguei a descartar, também. A imagem está lá o tempo todo, não é como se fosse algo a ser revelado pro jogador. Mas curti a idéia de um efeito andando ao longo da linha, pode dar uma sensação de "dever cumprido". Acho que vou usar o terremoto do SIGILOSO, quando esse efeito chegar no final, com um barulho mais "tchan", mais "explosão".

Rodrigo Santiago escreveu:E o mouse deve ser arrastado ate o final do desenho, se nao a linha desaparece.

Também não tenho certeza se entendi. Você quer dizer soltar o mouse pra completar a linha ao invés de só passar pelo ponto?

Uma dúvida é como associar o arquivo de texto à imagem. Pensei em colocar sempre o mesmo nome no arquivo e na imagem, o que parece funcionar. Mas gostaria de saber se alguém tem alguma idéia melhor.

Associar arquivos pelo mesmo nome e extensão diferente é um método bastante usado, pelo menos entre os muitos programas que já usei.
De qualquer forma, a menos que seja informações super secretas não vale o trabalho...
O máximo que acho necessário é deixar no arquivo onde guarda as coordenadas o caminho relativo para a imagem e/ou o título do exercício.

Outra dúvida: pra definir as coordenadas dos pontos, eu tenho feito o seguinte: abro a imagem no paint, passo o mouse sobre o ponto, leio o valor das coordenadas (elas aparecem na base da tela) e anoto no excell, que vai concatenar o texto com os nomes das variáveis e deixar da forma acima. Depois, num arquivo padrão com os textos "var i; i = 0;" e "nPontos = i", eu colo o resultado do excell no meio dos dois. Meio trabalhoso, também gostaria de uma solução mais rápida.

Só fazendo um editor mesmo. Se for só para definir os pontos não que de muito trabalho.
Um exemplo

Código:

// Create
n = 0;
px[n] = 0;
py[n] = 0;

// Script
// set_pt(x,y);
px[n] = argument0;
py[n] = argument1;

// Step
if mouse_check(mb_left) set_pt(mouse_x,mouse_y);
if mouse_check_released(mb_left) n += 1; // assim você pode clicar, arrastar e só definir o ponto quando soltar o botão do mouse

// E pra desenhar
draw_primitive_begin(pr_linelist);
for (i = 0; i < n; i += 1) {
    draw_vertex(px[n],py[n]);
}

Código:

Por fim, o mais complicado. Estou trabalhando num loader que vai fazer o seguinte: vai ler todos os arquivos de coordenadas, vai verificar se tem um arquivo de imagem (em qualquer extensão importável) associado a ele e vai colocar a imagem numa lista, em ordem alfabética. Daí, ele vai mostrar uma janela com todas as imagens escaladas pra ocupar um quadrado de tamanho fixo, com o nome da imagem abaixo dela...

Você pode usar as funções file_find_ para localizar os arquivos e deixar o título da imagem no arquivo de coordenadas.

Código:

- Devo permitir que simplesmente arrastar o mouse pelo ponto correto complete o trecho ou mantenho a obricação de soltar e clicar novamente? É mais fácil jogar só arrastando, mas fico com medo disso tirar o valor educacional do jogo, porque o jogador pode clicar no primeiro ponto e sair balançando o mouse pela tela.

Acho que ter de soltar mostra que ela tem que saber o que esta fazendo. Melhor assim.

Quanto ao resto se é para crianças cores vivas e icones grandes é o ideal.
Você poderia dar ao jogador a opção de escolher se quer em ordem alfabética ou por dificuldade.
Parabenizar no final do trabalho bem feito é bom. Algo como uma mensagem grande escrito "Bom trabalho!", "Muito bem!", "Parabéns!" e "Pronto para outro desafio?".

Belas dicas, kabeção!

Fico tranquilizado em ler que essa idéia de associar os nomes dos arquivos é uma prática comum. Eu pretendo baixar mais e mais imagens e ir criando os arquivos de coordenadas aos poucos, então os nomes podem ser alterados (tipo, pode haver mais que um "porquinho", daí um deles vai passar a se chamar "porquinho2"). Aí, acho mais fácil manter a associação só pelo nome semelhante mesmo, sem um arquivo chamando o outro.

Quanto ao loader, encontrar os arquivos está semi-resolvido. Eu uso file_find_first e procuro pelo arquivo de coordenadas (que é o mais difícil de existir - se não houver nenhum, game over). Depois faço o mesmo num while, com file_find_next, sempre confirmando se existe um arquivo de imagem pra ser associado àquelas coordenadas (se não existir, ignora as coordenadas).
Só que isso me gera uma ordem alfabética e eu só estou pegando os arquivos .png, por enquanto. Quando pegar de outras extensões, vai ficar na ordem das extensões primeiro e em ordem alfabética depois. ds_lists resolvem o problema da ordem alfábética, mas como permitir organizar também em ordem de dificuldade? Duas ds_lists? É... Acho que duas ds_lists resolvem!
[Edit] (esqueci do principal!) Mas o maior problema está em colocar os ícones numa janelinha com barra de rolagem, selecioná-los com cliques, enfim, fazer o que o get_open_filename faz, sem usar o get_open_filename. Vou ruminando uma engine aqui.

Cores vivas é um problema. A maioria todas as imagens que a gente encontra são em preto-e-branco.
...
Eu poderia desenvolver imagens próprias! Se eu desenvolver minhas próprias imagens, posso apresentá-las numa versão em preto-e-branco e colorí-las quando o jogador terminar a tarefa. Claro que isso aumentaria muito o tempo de desenvolvimento de cada imagem, mas pode valer a pena. O jogo ia ficar fino, a ponto de eu postar algum produto final por aqui!

Cara, eu vinha me esquecendo de parabenizar os guris! TODO JOGO do discovery kids abusa do "muito bom" e "parabéns" - em áudio, porque os jogadores normalmente não sabem ler. Regra básica! Valeu pelo toque!

Ah, antes de criar um editor (cuja parte chata seria importar as imagens e exportar os arquivos de coordenadas), eu vou ver como vai ser a aceitação do jogo. Se for boa, vou usar seu método. Obrigado!

Só que isso me gera uma ordem alfabética e eu só estou pegando os arquivos .png, por enquanto. Quando pegar de outras extensões, vai ficar na ordem das extensões primeiro e em ordem alfabética depois. ds_lists resolvem o problema da ordem alfábética, mas como permitir organizar também em ordem de dificuldade? Duas ds_lists? É... Acho que duas ds_lists resolvem!

Se a dificildade é proporcional ou número de pontos use ds_priority.
Os valores são alinhados por prioridade, ou seja, os valores ficam em ordem numérica.
Enquanto busca os arquivos abre-os e retorna quantos pontos tem e coloque nesse ds_priority. Assim fica fácil alinhar usando as função da ds.

Código:

for (...)
{
    // ...
    ds_priority_add(files,titulo_exercicio,pontos);
}

// ordem_crescente()
// retorna lista em ordem numerica crescente
var pesquisa;
pesquisa = ds_list_create();

while ds_priority_size(files) {
    ds_list_add(pesquisa,ds_priority_delete_min(pesquisa));
}

return pesquisa;

// ordem_decrescente()
// retorna lista em ordem numerica decrescente
var pesquisa;
pesquisa = ds_list_create();

while ds_priority_size(files) {
    ds_list_add(pesquisa,ds_priority_delete_max(pesquisa));
}

return pesquisa;

Se for seguir esse método aconselho a manusear os arquivos por ids como foi largamente discutido aqui.
Ao invés dos títulos, organizar por ids e linkar qualquer informação, título, numero de pontos, descrição e etc a eles.
Facilita bastante a organização.

Quanto as cores, se não tem jeito não tem jeito.
Mas tudo pra criança costuma ser bem colorido.

Voce poderia usar uma sub pasta, dentro dela voce coloca um bloco de texto(sem extensao ) , nele voce escreve as informacoes das imagens na mesma pasta, organizada por nome e um outro por dificuldade, dai vc so faz a leitura de um ou de outro, dependendo da escolha, nome ou dificuldade.

Desse modo e muito facil fazer atualizacoes, se voce fizer um bom programa, da ate pra atualizar pela net.

Fassa arquivos com nomes especificos, um com a imagen e outro com as informacoes de pontos.
(dica para ler: a primeira linha o nome a segunda o nivel,e da tercera pra fente as coordenadas x,y)
(nao sei se e essa a sua duvida)

Obs.: aquele efeito da bola é quando voce clica e arrasta, o ponteiro do mouse vira uma bola que emite particulas
voce pode bloquear, se o usuario passar no ponto errado, perde uma chanse(vc coloca umas 3)

Custou, mas saiu!!! Agora, tenho uma rotina que cria os ícones como objetos, armazenando-os numa array, e define as posições em função da ordem em que foram criados. Essas posições também são armazenadas em arrays.
Daí, eu crio um botão pra cada prioridade que eu quero usar. Número de pontos, tamanho da imagem, nome da imagem (sim, priorities funcionam com valores de texto também, retornando a ordem alfabética). Aí, coloco o objeto-ícone obtido na ordem da priority na posição crescente. UFA, quase deu um nó no meu cérebro.

Agora é digerir a informação pra saber quais lists e priorities eu devo deletar, no final (provavelmente todas), bolar um script que me faça isso em que eu possa entrar com a priority como argumento e pensar num jeito do computador saber o que foi que eu fiz pra fazer o contrário da próxima vez que apertar o mesmo botão...

Ah, sim, e fazer esses botões-ícones me mandarem pra room do jogo e permitir que esse trabalho todo seja jogável!