lundi 28 août 2017

#02 Tuto AppGameKit 2 - Bouger un sprite avec son doigt

EDITO
Vous vous souvenez de mon tuto sur la création d'un sprite sur AGK2?
Et bien on reprend le même et on s'amuse à le faire bouger. 

CE QUE NOUS VOULONS FAIRE
Déplacer notre sprite avec son doigt sur l'écran


MISE EN PLACE
Nous reprendrons le même exemple que pour le #01 Tuto AppGameKit 2


CODE
On ajoute quelques lignes...soyez vigilants!

_______________________________________________________________________________

// Project: Sprite
// Created: 2017-08-19

// show all errors

SetErrorMode(2)

// set window properties
SetWindowTitle( "Sprite" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 60, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

    Sprite = CreateSprite(0)
    SetSpriteSize        (Sprite,50,50)
    SetSpritePosition  (Sprite,100,100)
    SetSpriteColor      (Sprite,255,255,255,255)
    SetSpriteVisible    (Sprite,1)


do


    if ( GetPointerPressed ( ) = 1 )
       
    x_pointer = GetPointerX()
    y_pointer = GetPointerY()
       
    x = GetSpriteX(Sprite)
    y = GetSpriteY(Sprite)
   
    bougeX = x_pointer - x
    bougeY = y_pointer - y
       
    SetSpritePosition    (Sprite,x+bougeX,y+bougeY)
       
    endif


    Print( ScreenFPS() )
    Sync()
loop

_____________________________________________________________________________________ 

EXPLICATIONS
Les lignes noires sont des lignes de codes
Les lignes grisées sont des lignes de commentaires, elles servent donc à commenter la ligne de code car on peut vite se perdre quand on dépasse un certain nombre de lignes.
Les lignes bleues sont des lignes de codes. Ce sont les lignes que j'ai ajouter pour le tuto.


   
if ( GetPointerPressed ( ) = 1 ) ... endif (le endif se trouve à la fin)
C'est notre condition pour savoir si on clique avec la souris sur l'écran ou que l'on touche avec notre doigt l'écran tactile.
On commence avec un "if" et on termine avec un "endif"
Comme une boucle, tout ce que se trouve à l'intérieur (entre If et endif) fait parti de la condition.

Il faut lire : Si j'appuie sur l'écran avec un doigt ou le pointeur de la souris il se passera ce que j'ai décris entre le "if" et le "endif" 
 
    x_pointer = GetPointerX()
    y_pointer = GetPointerY()

Justement, voici les 2 premières instructions que nous appelons dans notre condition.
Dans la variable "x_pointer" nous enregistrons la valeur du GetPointerX(). Il s'agit de la position en X de notre doigt ou du pointeur de la souris.
Vous l'aurez compris "y_pointer" enregistre la position en Y.

   
x = GetSpriteX(Sprite)
    y = GetSpriteY(Sprite)

Nous allons maintenant enregistrer dans les variables "x" et "y" la position du Sprite actuelle.
 
   
bougeX = x_pointer - x
    bougeY = y_pointer - y

bougeX et bougeY sont les résultats des distances entre le point ou l'on veut mettre notre sprite sur l'écran et la position actuel du sprite
 
   
SetSpritePosition    (Sprite,x+bougeX,y+bougeY)
Il nous reste à repositionner notre sprite en appelant SetSpritePosition
On reprend la position actuel "x" et "y" et on ajoute la distance calculé avec "bougeX" et "bougeY"

CONCLUSION
Nouvelle étape en douceur. Les possibilités sont nombreuses. On peut bien sur arriver à ce résultat avec une autre approche.

Vous cherchez à faire quelque chose de précis, vous pouvez me le demander en commentaire.

#AGK2 

jeudi 24 août 2017

#01 Phone – Le Galaxy Note 8 est-il un bon choix ?



Alors oui ! Mon blog n’est pas un blog sur la téléphonie. D’autres le font et le font très bien. Ils vous donneront pleins d’informations et de détails croustillants sur vos compagnons de tous les jours.


Ceci dit…

…il faut bien reconnaitre une chose. C’est qu’à notre époque, il y a de moins en moins de nouveautés dans nos appareils fétiches. Ou sont les boussoles à géométrie variable 3D, le GPS pour la lune ou le baromètre pour le soleil ? Ces choses qu’on n’utilisera pas ou peu et que nous voulons avoir pour dire je l’ai…
Alors oui ! Nous avons le temps de voir venir pour ces gadgets, mais on a toujours besoin d’un truc quand c’est inutile. C’est humain… J’imagine certains qui se disent « pas moi, tu te trompes, c’est faux ! »
Bon peut être que le GPS pour la lune n’est pas une priorité, j’avoue…

L’effet de surprise n’est plus là

Deux mois avant (voir plus) on connait pratiquement tous des mastodontes qui nous seront présentés lors d’une grande messe à coup de « je t’en mets plein la vue » avec effets de lumière et tout le tralala. Ils parleront pratiquement pendant deux heures du nouveau design et de la fiche technique sans apporter de réelles innovations.
Tous ces shows se suivent et se ressemblent. Rien de biens folichons même si c’est super bien fait il faut le reconnaitre. 

Nous sommes blasés ?

Bon ok.

Pourquoi pas. 

Ces téléphones sont déjà très biens, font pleins de choses pour améliorer notre quotidien et il y en a pour tous les goûts. Finalement pourquoi se plaindre ?!

Un nouveau Galaxy Note… 

Fin 2012, je suis dans la situation d’une personne qui veut changer son téléphone vieux de 3 ans assommé à coup de mises à jour en veux-tu en voilà. Un Iphone 3GS qui s’allume encore très bien aujourd’hui !
N’allons pas jusqu’à parler d’obsolescence programmée mais pourquoi mettre un V12 dans une Super 5 ? Ça part probablement d’un bon sentiment mais voilà le reste ne suit pas.
Je cherche donc un nouveau téléphone. Un Iphone 4 ? Non pour plusieurs raisons que je vais vous épargner.
Mes critères pour mon choix :
Quelque chose d’exotique que tout le monde n’a pas mais qui soit puissant !
Quoi de mieux qu’un Galaxy Note 2 tout fraichement sorti ?

Rien. Ou alors j’ai loupé le coche…
Ses dimensions, pour l’époque, n’étaient pas communes aux autres phones. Sa fiche technique était très bien sans être un foudre de guerre mais de souvenir Samsung prétendait déjà qu’il pouvait remplacer facilement votre PC domestique. Ce qui n’était pas faux mais la station d’accueil DeX n’existait pas encore.
Le Stylet, souvent interprété comme gadget à l’époque, apportait un nouveau mode d’utilisation de son téléphone, n’en déplaise à ses détracteurs.

J’ai donc sauté le pas et pris mon courage à deux mains… bon en fait j’ai payé et c’est tout !

Mais c’est quoi cet écran immense ?



Lorsque j’ai ouvert le coffret du GN2….. « wouaaaaw » c’est à peu près le mot qui est sorti de ma bouche ! J’ai cru que j’allais vite le retourner chez le fournisseur tant l’écran paraissait gigantesque (En 2012, un 4 pouce était déjà grand)

Bon très bien.

Finalement, très vite, je me suis fait à cette dimension malgré le fait que tous mes collègues se moquaient de moi et surtout de mon téléphone qui ressemblait pour eux à une cabine téléphonique.
Sans vraiment y croire et pour contre carré aux railleries, je leur disais « vous verrez que bientôt vos téléphones seront aussi grand que le mien ! »
Aujourd’hui, ils sont mêmes plus grands que mon Galaxy S7 (même pas en Edge)

Tout ça pour dire !

Oui parce que c’est bien beau de vous raconter ma vie mais venons-en au fait.

Est-ce que ce Galaxy Note 8 peut créer autant d’émotions que ses prédécesseurs ?
L’avenir nous le dira, car pour le moment il est disponible en précommande seulement.
Mais sans l’avoir eu dans les mains, y a quand deux choses qui interpellent…

Premièrement, si je dois reprendre mes critères de base qui sont :
« Quelque chose d’exotique que tout le monde n’a pas mais qui soit puissant ! » 
Déjà, Il est à peine plus grand qu’un Galaxy S8+. Je vous vois venir, la taille ne fait pas tout mais pour se démarquer ça ne fonctionne pas. Les coins sont un peu plus carrés cependant…mouai.
Ensuite, hormis le dual optique pour les photos et le S Pen nous avons une sorte de dérivé du Galaxy S8+

Ce qui nous amène au deuxièmement point, le prix !
Alors oui ! C’est tout nouveau c’est tout beau, il fait téléphone, tablette et ordinateur tout en un. 



1009 euros prix de base…

Attendu pour le 15 septembre 2017 au prix de base de 1009 euros, nous sommes loin des 595euros de mon Galaxy Note 2.
Bon après tout c’est normal que le prix augmente. Ne serait-ce que parce que les téléphones Samsung ne sont plus tout plastique depuis le Galaxy S6

Le Galaxy Note 8 est-il un bon choix ?

Sans l’essayer difficile à dire mais je pense que la Version 6…euh non 7 à du imposer à Samsung de revoir très sérieusement sa copie.

Alors pourquoi tu nous ponds un article si tu ne l’as pas essayé ? Et puis surtout si le blog n'ai pas un blog sur les téléphones.

Je me souviens juste de l'émotion que j'ai ressenti lorsque j'ai eu mon Galaxy Note 2. J'aimerai juste retrouver ce petit coté high-tech décalé.

Alors Galaxy Note 8 est-il un bon choix ?

mercredi 23 août 2017

#01 Tuto Gimp 2.8 - Création d'un cadre transparent avec les coins arrondis

CE QUE NOUS VOULONS FAIRE
Créer un cadre avec les coins arrondis. 
Il sera transparent pour pouvoir l'insérer dans vos projets (Application, site internet, blog,...)



MISE EN PLACE
J'utilise la version 2.8.14 mais ce tuto sera encore d'actualité dans les versions futurs de Gimp. Merci de m'indiquer dans les commentaires si vous rencontrez des difficultés. 
 
Tout d'abord, nous allons créer un nouveau projet en cliquant sur "Fichier" et "Nouvelle image..." (raccourci ctrl+N)


Vous choisissez ensuite la taille de votre cadre. Ici 300 x 150
IMPORTANT : 
N'oublier pas de cliquer sur "Options avancées" et de choisir dans le menu déroulant "Remplir avec : " et sélectionner "Transparence"



 
CREATION DU CADRE
Maintenant nous allons sélectionner l'outil de "Sélection rectangulaire"




Avec votre le pointeur de souris, cliquer sur le point en haut et à gauche de votre cadre (0,0) et sans lâcher le bouton de la souris amener le pointeur jusqu'en bas et à droite du cadre (300,150)


Une fois sélectionné, votre cadre doit être entouré par des pointillés qui bougent comme un chenillard. Je sais pas si vous voyez ce que je veux dire, en tout cas les pointillés ne doivent pas être immobiles sinon il faut refaire une sélection rectangulaire.

Bien... je pense que tout le monde est arrivé jusque là!

On va ensuite utiliser le menu de gauche :

  
En cliquant sur "Coins arrondis" vous allez voir une jauge "Rayon" apparaitre. 
C'est avec ça que vous allez choisir le rayon pour arrondir vos angles. 
Nous allons mettre 20.0 pour notre exemple. 

Je vois vos yeux me dire : Mais comment faire?

Soit vous cliquez dans la barre et sans lâcher le bouton vous bouger le curseur sur la valeur choisie ou bien vous cliquez sur les petites flèches à droite. Dernière possibilité, vous placez le curseur de la souris sur le 0.0 et vous inscrivez la valeur avec le pavé numérique. Ne pas oublier de faire "Entrée" pour valider votre valeur.


On voit bien qu'un cadre arrondi c'est dessiné dans notre cadre principal.

ET C'EST LA que tout ce complique...non je rigole.

Vous allez choisir la couleur de votre cadre maintenant...se sera rouge pour moi. 
Et avec l'outil de remplissage (le petit pot de peinture) vous allez remplir l'intérieur du cadre arrondi.
le petit pot de peinture


Oui je sais ça pique les yeux mais bon...c'est pas fini!

Alors maintenant nous allons créer l'épaisseur de notre cadre.
Il fera 2 pixels 

On repart au début de notre création de cadre, c'est à dire que nous allons sélectionner l'outil de sélection rectangulaire.
Normalement, la case "Coins arrondis" est encore cochée. Si ce n'est pas le cas faites le. Of course!
La valeur choisie dans la jauge doit être encore la même. Pour nous c'est 20.0 

Nous allons donc refaire une sélection de cadre mais cette fois ci avec un décalage de 2 pixels. Pour cela au lieu de commencer notre sélection à 0,0 , nous allons partir de 2 pixels en + sur l'axe X et idem sur l'axe Y et finir à 298 en X et 148 en Y (300 taille d'origine - 2 pixels, 150 taille d'origine - 2 pixels)

Vous pouvez vous aider du repère de position en bas à gauche de votre cadre de travail 

 
Bien! Maintenant vous devriez obtenir ceci :


A ce moment là vous appuyez sur la touche "Suppr" de votre clavier et vous allez ainsi obtenir un cadre transparent avec les coins arrondis!



CONCLUSION
Des cadres on en a tous besoin. Cela ne fait aucuns doute. 
Amusez vous à expérimenter les nombreuses possibilités qui s'ouvrent à vous. 
Par exemple, remplir avec un dégradé. 

En attente de vos commentaires!

samedi 19 août 2017

#01 Tuto AppGameKit 2 - Création d'un sprite


EDITO
Je vais commencer une série de tutos pour programmer sur AppGameKit 2 , le logiciel que j'utilise pour "fabriquer" mes applications.
Il y a très peu de tutos en Français et c'est donc pour cela que je vais essayer de vous aidez.

N'hésitez pas à me proposer des tutos ou à proposer vos codes!

CE QUE NOUS VOULONS FAIRE
Afficher simplement un sprite carré sur notre écran comme sur notre exemple.


MISE EN PLACE
Tout d'abord, nous allons créer un nouveau projet en cliquant sur "NEW"
Je l'ai appellé "Sprite" mais vous faites comme vous voulez. Vous pouvez l'appeller "Patate" ou " Poireau" ça fonctionne aussi.


CODE
_____________________________________________________________________________________

// Project: Sprite
// Created: 2017-08-19

// show all errors

SetErrorMode(2)

// set window properties
SetWindowTitle( "Sprite" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 60, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

    Sprite = CreateSprite(0)
    SetSpriteSize        (Sprite,50,50)
    SetSpritePosition  (Sprite,100,100)
    SetSpriteColor      (Sprite,255,255,255,255)
    SetSpriteVisible    (Sprite,1)


do
    Print( ScreenFPS() )
    Sync()
loop

_____________________________________________________________________________________ 

EXPLICATIONS
Les lignes noires sont des lignes de codes
Les lignes grisées sont des lignes de commentaires, elles servent donc à commenter la ligne de code car on peut vite se perdre quand on dépasse un certain nombre de lignes.
Les lignes bleues sont des lignes de codes. Ce sont les lignes que j'ai ajouter pour le tuto.


    Sprite = CreateSprite(0) 

"Sprite" est une valeur entière (integer). 
C'est le nom que l'on donnera à notre sprite dans tout notre programme.
Il n'y aura donc pas plusieurs valeur "Sprite" différentes
Le 0 signifie que l'on veut un sprite blanc. 
Nous verrons dans un autre tuto que l'on peut mettre une image à la place. 

    SetSpriteSize        (Sprite,50,50)

Nous lui donnons une dimension. 50 pixels de coté
 
    SetSpritePosition  (Sprite,100,100)

La position de notre sprite sera de 100 pixels en X et 100 pixels en Y 
Le point d'origine étant en haut et a gauche de notre écran de travail.
 
    SetSpriteColor      (Sprite,255,255,255,255)

Bien que nous avons demandé un sprite blanc avec le 0  du CreateSprite(0), nous pouvons modifier sa couleur et sa transparence.
SetSpriteColor (Sprite, Rouge, Vert, Bleu, Transparence Alpha) 
Rouge est compris entre 0 et 255
Vert est compris entre 0 et 255
Bleu est compris entre 0 et 255
Alpha est compris entre 0 et 255
Amusez vous à modifier ces valeurs une par une ou toutes d'un coup pour voir ce que cela donne.
 
    SetSpriteVisible    (Sprite,1)

Pas de surprise, cette commande permet de rendre visible ou invisible votre sprite sur l'écran.
Par défaut et sans appeler cette commande, votre sprite apparaitra mais vous verrez par la suite qu'il est intéressant de ne pas afficher votre sprite de suite sinon vous risquez de le voir s'afficher dans les menus de votre jeu dans le cas ou vous en mettrez un.

CONCLUSION
On commence doucement et j'imagine que beaucoup son déjà à un niveau largement supérieur. 
Dans les tutos suivants spéciales AppGameKit 2, nous ferons bouger ce sprite avec plusieurs moyens. (Joystick, clavier, accéléromètre , etc...)
Nous verrons également les animations de sprites.
On le fera tomber aussi avec la gravité. 

En attente de vos commentaires!

#AGK2 

mardi 8 août 2017