2 on.paint ?

[GreenTree0]

D'ac, merci ^^, et je t'inquiete, une fois que je sais le faire c'est bon, je pourrai l'utiliser pour tout !

[Adriweb]

Bref, voici un code d'exemple avec des commentaires partout :

Code: Tout sélectionner

-- Template code - Morpion (tic tac toe)
-- Adriweb
-- Pour https://tiplanet.org/forum/viewtopic.php?f=15&t=20453
---------------------

-- Au départ, on a une grille vide, donc une matrice (tableau 2D) de 3x3 cases vides
local grille -- cf. ci-dessous pour l'initialisation

-- On remet-a-zéro la grille quand on appuie sur Esc
function on.escapeKey()
    grille =
    {
        { "", "", "" },
        { "", "", "" },
        { "", "", "" },
    }
    platform.window:invalidate()
end
on.escapeKey() -- on initialise la grille au début

local taille -- de la police
function on.resize()
    taille = platform.hw() > 5 and 80 or 255 -- si c'est sur ordi, mettre moins grand, sinon max
end

-- Les marques de chacun
local j1, j1couleur = "X", 0xFF0000 -- rouge
local j2, j2couleur = "O", 0x0000FF -- bleu

-- Le joueur en cours ; on commence par le X
local joueur = j1

-- Est-ce qu'un joueur a gagné ?
local win = false -- 0 si egalité, 1 si joueur 1, 2 si joueur 2

function checkWin()
    -- A coder...
    -- win = ...
end

-- On regarde quand l'utilisateur appuie sur une touche représentant un nombre de 1 à 9...
function on.charIn(ch)
    if win then return end -- on ne traite plus si la partie est terminée
    local num = tonumber(ch)
    if num >= 1 and num <= 9 then
        -- récupération de la ligne et de la colonne pour la matrice
        local ligne   = 3 - math.floor((num-1)/3)
        local colonne = ((num-1)%3) + 1
        grille[ligne][colonne] = joueur
        -- on change la marque pour le coup d'après
        if joueur == j1 then joueur = j2 else joueur = j1 end
        -- on verifie s'il y a un gagnant
        checkWin()
        -- on veut que l'écran se redessine
        platform.window:invalidate()
    end
end

function on.paint(gc, x, y, w, h)
    -- affichage du titre au milieu en haut
    gc:setFont("sansserif", "bi", 12)
    gc:setColorRGB(100, 200, 8)
    gc:drawString("Morpion", (w-gc:getStringWidth("Morpion"))/2, h/40)
   
    -- dessin de la grille
    gc:drawLine(w/5, h/3, 4*w/5, h/3)
    gc:drawLine(w/5, 3*h/5, 4*w/5, 3*h/5)
    gc:drawLine(2*w/5, h/7, 2*w/5, 4*h/5)
    gc:drawLine(3*w/5, h/7, 3*w/5, 4*h/5)
       
    -- dessin des choix des joueurs
    gc:setFont("sansserif", "b", taille)
    for ligne=1,3 do
        for colonne=1,3 do
            local marque = grille[ligne][colonne]
            gc:setColorRGB(marque == j1 and j1couleur or j2couleur)
            gc:drawString(marque, colonne * w/4.75 + colonne*w/50, ligne * h/4.5 - h/12)
        end
    end
   
    -- dessin du reste en fonction du statut
    -- if win >= 0 then
    -- ... à coder
    -- end
end


[GreenTree0]

Alors déja merci énormément pour le script, mais j'vais te le dire franchement, même avec les commentaires, c'est beaucoup trop complexe pour moi, j'arrive pas à comprendre et ducoup ca me paume encore plus :/, je sais que mon programme/code est très très mal fait, mais on passe tous par la pour en arriver à ton stade, enfait j'aurais juste besoin que tu me dise comment, depuis mon programme, je pourrai faire en sorte que "5" crée l'image de croix sur l'endroit, meme si mon script seras beaucoup beaucoup plus moche, au moins je pourrais dire que je le comprends, et j'avancerai en faisant des scripts de plus en plus beau ^^
Apres j'peut comprendre que t'es pas forcement envie apres y avoir déja passé autant de temps mais voila ^^
Je garde quand meme ton script pour essayer de le comprendre plus tard

Et encore merci !

[Adriweb]

En fait, je sais que je te plonge dans un code "déjà cuit" (et encore, j'ai pas tout fait), mais justement pour que tu puisse essayer de comprendre, par l'exemple, comment on est censé faire sur un jeu simple. Donc en gros, bout par bout, qu'est-ce que tu ne comprend pas dans mon code ? (pas grave si ya beaucoup de choses, liste les)

Ton programme original n'est pas forcément mauvais, et en gros sur un autre langage/environnement, il aurait surement marché - c'est aussi pour ça que je te montre un code "fonctionnel" pour comparer: bien que le résultat soit en gros le même (différences mineures), c'est la façon de penser qui est différente.
Par exemple, au lieu de vouloir donner des ordres de dessin lors d'une action, il faut penser autrement (le principe du Nspire-Lua) : dans une seule et unique fonction (on.paint) l'on doit s'occuper de dessiner des choses à l'écran, et pas ailleurs (pas dans charIn, etc.).
Ceci veut donc dire qu'il faut mentalement (et donc dans le code) bien séparer ce qui est "données" (ici, la grille, qui est donc un tableau 2d), de l'affichage. L'un et l'autre sont indépendants et ne doivent pas être mélangés.
Donc pour afficher quelque chose selon si l'utilisateur a appuyé sur une touche, et bien on peut par exemple sauver l'état de la touche dans une variable, à partir du on.charIn, puis plus tard dans le on.paint, on affichera ce que l'on veut en fonction de la valeur de cette variable. Ainsi, les 2 bouts sont découplés, comme il se doit.

Tout ceci est expliqué davantage dans les tutoriaux que j'ai linké, cela dit

[GreenTree0]

Merci c'est très sympa ^^
Alors, déja je vais probablement me déconnecter très rapidement donc je te répondrai demain si tu me renvoi un message après je pense, donc enfait ce que je ne comprends pas sont pourtant des choses basiques mais je vais quand meme te les lister :
-Rien que par exemple ceci :

Code: Tout sélectionner

function on.escapeKey()
    grille =
    {
        { "", "", "" },
        { "", "", "" },
        { "", "", "" },
    }
    platform.window:invalidate()
end

Je ne comprends pas exactement à quoi il sert, qu'est ce que c'est, et ce que c'est une commande officielle etc...

-ceci :

Code: Tout sélectionner

function on.resize()
    taille = platform.hw() > 5 and 80 or 255 -- si c'est sur ordi, mettre moins grand, sinon max
end

Je ne comprends pas vraiment l'ensemble, sachant que taille est la variable de la police :/, qu'est ce que "platform.hw()" encore.

-Pour le coup je comprends plus mais j'ai encore des trucs à savoir sur ça :

Code: Tout sélectionner

local j1, j1couleur = "X", 0xFF0000 -- rouge
local j2, j2couleur = "O", 0x0000FF

Le j1couleur est égal à un symbole ? Et quand tu met une virgule ce qu'il y a apres ne va pas etre défini comme une autre variable ?

-On attaque un des piliers :

Code: Tout sélectionner

function on.charIn(ch)
    if win then return end -- on ne traite plus si la partie est terminée
    local num = tonumber(ch)
    if num >= 1 and num <= 9 then
        -- récupération de la ligne et de la colonne pour la matrice
        local ligne   = 3 - math.floor((num-1)/3)
        local colonne = ((num-1)%3) + 1
        grille[ligne][colonne] = joueur
        -- on change la marque pour le coup d'après
        if joueur == j1 then joueur = j2 else joueur = j1 end
        -- on verifie s'il y a un gagnant
        checkWin()
        -- on veut que l'écran se redessine
        platform.window:invalidate()
    end
end

Alors, que veut dire le "local num = tonumber(ch) ? Et le plus compliqué pour moi c'est les lignes : "local ligne = 3 - math.floor((num-1)/3)" et "local collone = ((num-1)%3)+1" et "grille[ligne][colonne]=joueur", je ne comprends en aucun point ces lignes, c'est l'endroit ou je sèche vraiment.

-Autre pilier :

Code: Tout sélectionner

function on.paint(gc, x, y, w, h)
    -- affichage du titre au milieu en haut
    gc:setFont("sansserif", "bi", 12)
    gc:setColorRGB(100, 200, 8)
    gc:drawString("Morpion", (w-gc:getStringWidth("Morpion"))/2, h/40)
   
    -- dessin de la grille
    gc:drawLine(w/5, h/3, 4*w/5, h/3)
    gc:drawLine(w/5, 3*h/5, 4*w/5, 3*h/5)
    gc:drawLine(2*w/5, h/7, 2*w/5, 4*h/5)
    gc:drawLine(3*w/5, h/7, 3*w/5, 4*h/5)
       

Pourquoi les lignes sont de couleurs vertes ? Comment as-tu fait les lignes ? Je veut dire, je comprends pas comment tu les as positionnées à partir des 2*w etc... Que veut dire "(w-gc:getStringWidth("Morpion"))/2, h/40)" ?

-Suite du pilier :

Code: Tout sélectionner

  gc:setFont("sansserif", "b", taille)
    for ligne=1,3 do
        for colonne=1,3 do
            local marque = grille[ligne][colonne]
            gc:setColorRGB(marque == j1 and j1couleur or j2couleur)
            gc:drawString(marque, colonne * w/4.75 + colonne*w/50, ligne * h/4.5 - h/12)
        end
    end

Je comprends pas à quoi correspondent : "for ligne=1,3 do", "for colonne=1,3 do" et toute celles qui vont après enfait.

Bon je dois y aller donc ma prochaine réponse seras demain, mais merci ^^

[Adriweb]

J'ai vu ton message et j'y répondrai probablement demain, ce soir étant un peu trop chargé pour moi... (j'éditerai ce message, ou un truc du genre)
Mais en tout cas, je vois qu'il y a quelques notions de Lua pur à aborder, ce qui devrait te débloquer pour la compréhension du reste.

[Ti64CLi++]

-Pour le coup je comprends plus mais j'ai encore des trucs à savoir sur ça :

Code: Tout sélectionner

local j1, j1couleur = "X", 0xFF0000 -- rouge
local j2, j2couleur = "O", 0x0000FF

Le j1couleur est égal à un symbole ? Et quand tu met une virgule ce qu'il y a apres ne va pas etre défini comme une autre variable ?

Quand tu ecris par exemple local mavar, monautrevar = valeur1, valeur2 cela affecte valeur1 a mavar et valeur2 a monautrevar

[Adriweb]

Je reprends donc point par point :

-Rien que par exemple ceci :

Code: Tout sélectionner

function on.escapeKey()
    grille =
    {
        { "", "", "" },
        { "", "", "" },
        { "", "", "" },
    }
    platform.window:invalidate()
end

Je ne comprends pas exactement à quoi il sert, qu'est ce que c'est, et ce que c'est une commande officielle etc...

La fonction on.escapeKey est une fonction qui va être appelée quand tu vas appuyer sur la touche

Esc

de ta calculatrice
Donc, ici, on s'en sert de fonction de remise-a-zero (reset), et c'est d'ailleurs pour ca qu'on l'appelle juste après à la main, pour initialiser le jeu.
Bref, ce que fait la fonction, c'est créer un tableau 2d "vide" (constitué de chaînes vides: ""), de dimension 3*3.

-ceci :

Code: Tout sélectionner

function on.resize()
    taille = platform.hw() > 5 and 80 or 255 -- si c'est sur ordi, mettre moins grand, sinon max
end

Je ne comprends pas vraiment l'ensemble, sachant que taille est la variable de la police :/, qu'est ce que "platform.hw()" encore.

Donc, on.resize est une fonction qui va être appelée lorsqu'on redimensionne la fenetre du script sur le Nspire computer Software, ainsi qu'au début (lancement du script).
Ainsi, ça permet d'avoir une taille dès le début.
Pour platform.hw(), et bien, tout est marqué dans la doc Pour citer le wiki inspired-lua : "platform.hw() returns a numeric value that indicates the CPU speed of the host hardware. The higher the number, the faster the hardware.". En l'occurence, 3 pour calculatrices, et 7 pour ordinateur.
En fait, sur ordinateur, comme l'écran sera plus grand, il faudra une taille de police différente. C'est tout (et on y va au pif en testant pour voir quelle valeur va bien)
Par rapport à la notation "platform.hw() > 5 and 80 or 255", dans ce cas ça veut dire: si "platform.hw() > 5" alors 80 sinon 255.

-Pour le coup je comprends plus mais j'ai encore des trucs à savoir sur ça :

Code: Tout sélectionner

local j1, j1couleur = "X", 0xFF0000 -- rouge
local j2, j2couleur = "O", 0x0000FF

Le j1couleur est égal à un symbole ? Et quand tu met une virgule ce qu'il y a apres ne va pas etre défini comme une autre variable ?

Côté syntaxe Lua, en effet comme on te l'a dit avant moi, "local a,b = c,d" va mettre c dans a et d dans b (etc. s'il y en avait plus).
Ensuite, oui, on va assigner a j2 le symbole "O", et a j1 le symbole "X". Ca va donc servir a être affiché tel quel (avec la couleur, codée en 0xRRGGBB, r = red, g = green, b = blue, cf. ici)

-On attaque un des piliers :

Code: Tout sélectionner

function on.charIn(ch)
    if win then return end -- on ne traite plus si la partie est terminée
    local num = tonumber(ch)
    if num >= 1 and num <= 9 then
        -- récupération de la ligne et de la colonne pour la matrice
        local ligne   = 3 - math.floor((num-1)/3)
        local colonne = ((num-1)%3) + 1
        grille[ligne][colonne] = joueur
        -- on change la marque pour le coup d'après
        if joueur == j1 then joueur = j2 else joueur = j1 end
        -- on verifie s'il y a un gagnant
        checkWin()
        -- on veut que l'écran se redessine
        platform.window:invalidate()
    end
end

Alors, que veut dire le "local num = tonumber(ch) ? Et le plus compliqué pour moi c'est les lignes : "local ligne = 3 - math.floor((num-1)/3)" et "local collone = ((num-1)%3)+1" et "grille[ligne][colonne]=joueur", je ne comprends en aucun point ces lignes, c'est l'endroit ou je sèche vraiment.

La fonction "tonumber()" sert à convertir un string en nombre, si le string représentait un nombre. Donc "8" sera transformé en 8, par exemple. Après, ça permet de faire des conditions dessus pour vérifier que ca tombe bien dans l'intervalle que l'on veut autoriser pour jouer (de 1 à 9 donc pour être dans la grille)
Les math.floor (partie entière d'un nombre), % (modulo = reste de la division euclidienne) etc. ça sert a transformer un nombre en son équivalent coordonées dans le tableau. Par exemple, 5, ça correspond au milieu de la grille/tableau. Donc coordonnées [2;2]., 9 : coordonnées [3;3], etc.

-Autre pilier :

Code: Tout sélectionner

function on.paint(gc, x, y, w, h)
    -- affichage du titre au milieu en haut
    gc:setFont("sansserif", "bi", 12)
    gc:setColorRGB(100, 200, 8)
    gc:drawString("Morpion", (w-gc:getStringWidth("Morpion"))/2, h/40)
   
    -- dessin de la grille
    gc:drawLine(w/5, h/3, 4*w/5, h/3)
    gc:drawLine(w/5, 3*h/5, 4*w/5, 3*h/5)
    gc:drawLine(2*w/5, h/7, 2*w/5, 4*h/5)
    gc:drawLine(3*w/5, h/7, 3*w/5, 4*h/5)
       

Pourquoi les lignes sont de couleurs vertes ? Comment as-tu fait les lignes ? Je veut dire, je comprends pas comment tu les as positionnées à partir des 2*w etc... Que veut dire "(w-gc:getStringWidth("Morpion"))/2, h/40)" ?

La couleur verte est due à ton gc:setColorRGB du dessus
Les w et h sont des variables automatiquement passées à la fonction on.paint par la calculatrice, et représentent la taille de l'écran (pour width et height respectivement) qui est en cours d'être dessiné. Donc ca permet d'avoir la largeur et hauteur facilement.
Pour la ligne avec le getStringWidth, c'est pour pouvoir afficher le texte au milieu (c'est juste un calcul de la coordonnée en x pour savoir où placer le texte qui sera au milieu)
Ensuite, utiliser 2*w etc., au lieu de nombres directement, c'est pour que le jeu soit compatible avec d'autres plateformes que la calculatrice uniquement : ordinateur, iPad etc. en effet, ils n'ont pas la même taille d'écran, donc au lieu de dire "à 134 px à gauche", qui est une position arbitraire, on dit "à 20% de la taille de l'écran". Ainsi, en gardant tout en relatif et non en absolu, ça s'affichera correctement (à la bonne taille/ratio) partout

-Suite du pilier :

Code: Tout sélectionner

  gc:setFont("sansserif", "b", taille)
    for ligne=1,3 do
        for colonne=1,3 do
            local marque = grille[ligne][colonne]
            gc:setColorRGB(marque == j1 and j1couleur or j2couleur)
            gc:drawString(marque, colonne * w/4.75 + colonne*w/50, ligne * h/4.5 - h/12)
        end
    end

Je comprends pas à quoi correspondent : "for ligne=1,3 do", "for colonne=1,3 do" et toute celles qui vont après enfait.

Boucles "for" de base. par exemple avec "for ligne=1,3 do", ca va créer une variable locale "ligne" qui va d'abord valoir 1 (puis le contenu de la boucle va être exécuté avec cette valeur), puis ligne va valoir 2 (puis exécution du contenu), puis ligne va valoir 3, puis derniere exécution du contenu. Bref, ça permet donc d'itérer sur chaque ligne et colonne du tableau, et donc en afficher le contenu.