tag:linuxfr.org,2005:/tags/canvas/publicLinuxFr.org : les contenus étiquetés avec « canvas »2023-02-21T09:01:16+01:00/favicon.pngtag:linuxfr.org,2005:Post/434902023-02-19T20:17:49+01:002023-02-20T15:19:31+01:00tkinter → aliens (jeux)<p>Salut, c’est encore moi,</p>
<p>Après <a href="//linuxfr.org/forums/programmation-python/posts/demineur-agreable-avec-tkinter">le démineur</a>, nous avons cherché à voir jusqu’où nous pouvions aller avec un objet de type Canvas…</p>
<p><em>Dans le contexte, là où je travaille, je n’ai accès qu’à Python 3.5 Portable sur de vieux P4 Windows XP… (sans PyGame par exemple) C’est donc le défi…, faire des jeux en tkinter, sans son pour l’instant, mais c’est pas grave…</em> Quoi que, si quelqu’un à une idée, de comment émettre du son, dans ce contexte ↑, ce serait super :)</p>
<p><em>J’apprends moi-même Python, je prépare des supports d’apprentissage et j’accompagne déjà quelques élèves…</em></p>
<p>J’apprécie vos conseils et j’essaye d’en tenir compte au fur et à mesure…</p>
<p>Le fichier python, <a href="https://www.spaceeman.be/files/dev/aliens-v0.23.zip">aliens-v0.23.zip</a> </p>
<p>Je vous laisse découvrir, au clavier flèches et espace ou à la souris et deux boutons… Ce n’est qu’un début, il n’y a pas encore de score et qu’un seul "niveau"…</p>
<p>Et la capture d’écran ↓<br>
<img src="//img.linuxfr.org/img/68747470733a2f2f7777772e7370616365656d616e2e62652f66696c65732f6465762f616c69656e732d76302e32332e706e67/aliens-v0.23.png" alt="Titre de l'image" title="Source : https://www.spaceeman.be/files/dev/aliens-v0.23.png"></p>
<div><a href="https://linuxfr.org/forums/programmation-python/posts/tkinter-aliens-jeux.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/130360/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmation-python/posts/tkinter-aliens-jeux#comments">ouvrir dans le navigateur</a>
</p>
Space_e_manhttps://linuxfr.org/nodes/130360/comments.atomtag:linuxfr.org,2005:Diary/399492021-10-08T23:45:45+02:002021-11-29T07:57:25+01:00opensara: un nouveau jeu libreLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Bonjour Nal,</p>
<p>Après Newton Adventure et Ned et les maki, je me lance dans le développement de nouveaux jeux libres.</p>
<p>Ayant plusieurs projets en tête, j'avais décidé de faire des prototypes pour tester mes idées de gameplay. Le premier était shmuprpg, le deuxième underthief et le troisième bomberned. L'excellent moteur de recherche de linuxfr te permettra de retrouver les journaux où j'en parle et tu peux toujours y jouer sur <a href="https://play.devnewton.fr/">mon site</a>.</p>
<p>Je reviens aujourd'hui avec un projet plus complet: <a href="https://play.devnewton.fr/opensara">opensara</a></p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f737072697465732f7469746c652e706e67/title.png" alt="opensara logo" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/sprites/title.png"></p>
<h3 id="toc-le-jeu">Le jeu</h3>
<p>Opensara met en scène des aventures de Sara, la mascotte du très bon site <a href="https://opengameart.org/">opengameart.org</a> consacré au partage de ressources pour les jeux vidéo libres.</p>
<p>Il s'agit de petites aventures, à jouer pendant une pause café, un peu comme on lit une bande dessinée en une page à la fin d'un journal. Petites, mais pas de tout repos: Sara va être empoisonnée, faite prisonnière d'un vampire et forcée à combattre des monstres pour la République Populaire de Grande Asie.</p>
<p>On choisit son aventure et on recommence autant que l'on veut. Sans être du casual gaming, le jeu est fait pour être terminable par un (jeune) enfant sans trop de mal.</p>
<p>Selon l'aventure, le gameplay est celui d'un jeu de plateforme ou d'un shoot them up.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f646f63732f67616d65706c61792e77656270/gameplay.webp" alt="gameplay" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/docs/gameplay.webp"></p>
<h3 id="toc-le-code-et-les-assets">Le code et les assets</h3>
<p>Opensara est écrit en Javascript vanilla pour brouteur. Le rendu graphique est fait avec l'API Canvas et le son avec Web Audio.</p>
<p>Comme une quête secondaire de ce projet était de voir ce que le Javascript moderne a dans le bide, j'ai mélangé joyeusement les styles de programmation impératifs, fonctionnels et objets 🙈 🙉 🙊 .</p>
<p>Les sprites ont été fait majoritairement avec <a href="https://github.com/LibreSprite/LibreSprite">Libresprite</a>, avec un soupçon de Gimp et de Krita.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f646f63732f6c696272657370726974652e706e67/libresprite.png" alt="libresprite" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/docs/libresprite.png"></p>
<p>Les bruitages ont été créés avec <a href="https://sfxr.me">jsfxr</a>.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f646f63732f6a736678722e706e67/jsfxr.png" alt="jsfxr" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/docs/jsfxr.png"></p>
<p>Les niveaux sont éditables avec <a href="https://www.mapeditor.org/">Tiled</a>.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f646f63732f74696c65642e706e67/tiled.png" alt="tiled" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/docs/tiled.png"></p>
<p>Le <a href="https://framagit.org/devnewton/opensara">code source</a> est bien sûr sous licence libre (MIT). Les graphismes et les bruitages aussi, mais je vais les re-licencier bientôt en CC-BY et OGA-BY quand je les mettrais sur opengameart.</p>
<p>Les musiques sont "empruntées" (CC-BY) au génial <a href="https://opengameart.org/users/centurionofwar">Centurion_of_war</a>.</p>
<h3 id="toc-jouer">Jouer !</h3>
<p>A toi de jouer maintenant Nal* en utilisant les touches fléchées et la barre d'espace de ton clavier ou une bonne manette:</p>
<p><a href="https://play.devnewton.fr/opensara">Jouer à opensara</a></p>
<p>*: soit patient le temps de chargement peut être long. Avec mon petit serveur, Sara est longue à venir.</p>
<div><a href="https://linuxfr.org/users/devnewton/journaux/opensara-un-nouveau-jeu-libre.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/125651/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/devnewton/journaux/opensara-un-nouveau-jeu-libre#comments">ouvrir dans le navigateur</a>
</p>
devnewton 🍺https://linuxfr.org/nodes/125651/comments.atomtag:linuxfr.org,2005:Post/398052019-01-16T15:19:33+01:002019-01-16T15:19:33+01:00tk: boutons, actions et passage d'argument avec lambda<p>Bonjour,<br>
Je suis en train de faire une petite application graphique avec python et tk.</p>
<p>Je crée un canvas sur lequel je place quatre boutons à l'aide d'une boucle. Pour cela, je crée d'abord des tableaux, dans lequel je mettrai ensuite les objets boutons. Pour que chaque bouton puisse avoir une action différente, je souhaite donner un argument dans la commande de ceux-ci. Le problème que j'ai, c'est qu'avec mon code, tous les boutons ont la même action (j=4), et je ne comprend pas pourquoi…</p>
<p>Voici mon code simplifié, pour tester:</p>
<pre><code>#!/usr/bin/python3
import os, sys
pathname=sys.path[0]
bgcolor = "lightgrey"
# Couleur des colonnes, autant que le nombre désiré
cols_colors = ["lightblue","lightgrey","lightgreen","orange"]
class Application(object):
def __init__(self):
"""Constructeur de la fenêtre principale"""
self.root =Tk()
self.root.title('compter')
# Tableaux pour les boutons
self.btn=[]
self.fen_btn=[]
self.slideshow()
self.root.bind("<F11>", self.toggle_fullscreen)
self.root.bind("<Escape>", self.end_fullscreen)
self.state = False
self.toggle_fullscreen()
self.root.focus_set() # prendre le focus
self.root.mainloop()
def toggle_fullscreen(self, event=None):
self.state = not self.state # Just toggling the boolean
self.root.attributes("-fullscreen", self.state)
return "break"
def end_fullscreen(self, event=None):
if self.state == False :
self.root.quit()
self.state = False
self.root.attributes("-fullscreen", False)
return "break"
def slideshow(self):
"""Canevas avec colonnes"""
self.screen_w = self.root.winfo_screenwidth()
self.screen_h = self.root.winfo_screenheight()
# Créer le canevas
self.can = Canvas(self.root, width=self.screen_w, height =self.screen_h, bg =bgcolor)
self.can.grid(row =1, column =1, columnspan =1, pady =0, padx =0)
# Les colonnes et boutons
j=0
for i in cols_colors:
self.can.create_rectangle(self.screen_w//len(cols_colors)*j, 70, self.screen_w//len(cols_colors)*(1+j), self.screen_h, fill =i, width =2)
# Le bug est probablement dans les deux lignes suivantes
self.btn.append(Button(self.can, text="OK", bg=bgcolor, command = lambda: self.valider(j)))
self.fen_btn.append(self.can.create_window(self.screen_w//8*(2*j+1), 300+70+50, window =self.btn[j]))
j+=1
def valider(self,col):
'''Valider une colonne'''
print("colonne: ", col)
def stop(self):
self.root.quit()
# Programme principal :
if __name__ == '__main__':
from tkinter import *
f = Application() # instanciation de l'objet application
</code></pre>
<p>Merci pour votre aide!</p>
<div><a href="https://linuxfr.org/forums/programmation-python/posts/tk-boutons-actions-et-passage-d-argument-avec-lambda.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/116218/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmation-python/posts/tk-boutons-actions-et-passage-d-argument-avec-lambda#comments">ouvrir dans le navigateur</a>
</p>
tedhttps://linuxfr.org/nodes/116218/comments.atomtag:linuxfr.org,2005:Diary/339562013-05-31T14:16:56+02:002013-05-31T14:16:56+02:00Dans lequel on revient sur les performances SVG des FirefoxLicence CC By‑SA http://creativecommons.org/licenses/by-sa/3.0/deed.fr<p>Chers lecteurs et chères lectrices,</p>
<p>Vous vous souvenez peut-être de mon précédent journal, Où il est question de D3, des communes de France et des performances SVG des moteurs de rendu abordant brièvement les piètres performances de rendu SVG de Firefox. Un commentaire fort pertinent m'y a suggéré l'utilisation de <code>canvas</code> pour pallier à ces problèmes de performances.<br />
</p>
<p>Voici donc le résultat, avec la possibilité de passer de canvas à SVG pour comparer : <a href="http://ssz.fr/places">http://ssz.fr/places</a><br />
Vous remarquerez rapidement que les performances restent sensiblement les mêmes sous Chromium, mais qu'il y a une importante différence avec Firefox.<br />
</p>
<p>Plus récemment, j'ai fait une autre carte du même genre, avec moins d'éléments, mais plus dynamiques, ce qui rend un canvas moins adapté. La voici : <a href="http://ssz.fr/ker">http://ssz.fr/ker</a> - ce n'est pas forcément très utile, ça permet de visualiser les (~1300) toponymes des îles Kerguelen par date d'attribution et par auteur, des premiers en 1772 aux derniers en 1971. Kerguelen est assez pratique pour ça, puisqu'elle a été découverte relativement récemment, et que l'origine de tous les noms a très bien été documentée par la Commission de Toponymie des Terres Australes dans les années 60-70.<br />
</p>
<p>Bref, avec seulement un millier de points, je me pensais loin de dépasser les limites de l'acceptable pour Firefox, or en SVG c'est tout simplement inutilisable, même après avoir enlevé tous les effets de transparence, et même en réduisant la taille des éléments pour éviter tout chevauchement (j'ai pu remarquer que les chevauchements entre éléments SVG opaques sont bien moins performants qu'entre éléments totalement transparents mais avec une épaisse bordure). J'ai donc fait un test avec des éléments HTML positionnés de manière absolue, au cas où — des <code>span</code> en <code>display:block</code> avec des <code>border-radius</code>, et du <code>transform: scale()</code> pour ajuster les dimensions — et… c'est plus performant que du SVG sur Firefox. Mais moins sur Chromium.<br />
<br />
Pour avoir les meilleures performances sous Firefox, je me retrouve donc à faire un fond de carte en <code>canvas</code>, un graphique en SVG, et des points en HTML. Sous Chromium, le fond de carte en <code>canvas</code> a de bien meilleures performances qu'en SVG, mais reste quand même utilisable en SVG.</p>
<p> </p>
<p>En conclusion, il semblerait qu'il faille éviter à tout prix d'utiliser du SVG avec Firefox, <code>canvas</code> a des performances largement supérieures à la fois avec Firefox et Chromium. Pour essayer d'optimiser le rendu suivant le navigateur, j'ai fini par mettre un</p>
<pre>
<code class="js"><span class="kd">var</span> <span class="nx">svg</span> <span class="o">=</span> <span class="k">typeof</span> <span class="nx">InstallTrigger</span> <span class="o">==</span> <span class="s1">'undefined'</span><span class="p">;</span>
</code>
</pre>
<p>qui met la variable <code>svg</code> à <code>true</code> quand le navigateur est autre que Firefox, pour décider de quelle méthode utiliser ensuite pour le rendu.</p><div><a href="https://linuxfr.org/users/see/journaux/dans-lequel-on-revient-sur-les-performances-svg-des-firefox.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/98495/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/see/journaux/dans-lequel-on-revient-sur-les-performances-svg-des-firefox#comments">ouvrir dans le navigateur</a>
</p>
못 옷 홋 ♨https://linuxfr.org/nodes/98495/comments.atomtag:linuxfr.org,2005:Diary/335902013-01-20T15:23:29+01:002013-01-20T15:23:29+01:00Vous reprendrez bien un peu de poney?Licence CC By‑SA http://creativecommons.org/licenses/by-sa/3.0/deed.fr<p>Bonjour à toutes et à tous.</p>
<p>Ceci est la suite de <a href="http://linuxfr.org/users/zvin--2/journaux/mangez-des-poneys">mon précédent journal</a></p>
<p>Je viens pour vous reparler de <a href="http://eatponies.com">eatponies.com</a>.<br />
Petit rappel:</p>
<blockquote>
<p>Il s'agit d'un "bookmarklet" qui permet de dessiner à plusieurs simultanément par dessus des sites web.</p>
</blockquote>
<p>J'ai corrigé quelques bugs, amélioré le temps de chargement et surtout publié le <a href="https://github.com/zvin/vandal">code source</a>. C'est écrit en go et en javascript pour ceux que ça intéresse.</p>
<p>Il y a assez peu de sites gribouillés car assez peu de gens sont au courant de l'existence du site (ou alors ça n’intéresse personne…)</p>
<p>Voila, j'espère que cette fois ci ça ne plantera pas en 20 minutes comme la dernière fois :)</p>
<p>Bon dimanche!</p><div><a href="https://linuxfr.org/users/zvin--2/journaux/vous-reprendrez-bien-un-peu-de-poney.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/97134/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/zvin--2/journaux/vous-reprendrez-bien-un-peu-de-poney#comments">ouvrir dans le navigateur</a>
</p>
zvinhttps://linuxfr.org/nodes/97134/comments.atomtag:linuxfr.org,2005:Diary/321972012-02-16T13:58:56+01:002012-02-16T13:58:56+01:00Recherche désespérément framework pour application RIA HTML5 basées sur Canvas (et non le DOM)Licence CC By‑SA http://creativecommons.org/licenses/by-sa/3.0/deed.fr<p>Le web c'est la plate forme ultime, ca y est, maintenant j'y crois : tout le monde peut avoir un smartphone et un abonnement 3G à un prix presque abordable, des tablettes multitouch se vendent sur le net à moins de 100 euros parce qu'elles n'ont que 256mo de RAM. </p>
<p>Tous ces beaux objets ont chacun leur propre framework de développement mais intègrent des navigateurs théoriquement capable d'héberger des applications riches entières se basant sur Javascript, l'API Canvas (voire SVG) pour le rendu 2D voir 3D avec WebGL. Sont également disponibles de la communication réseau, du stockage local relationnel (IndexDB), un mode d’exécution hors connection. Pas d'inquiétude non plus sur les moyens de diffuser ces applis : Google et Mozilla ont prévu ou déjà sorti leurs boutiques en ligne dédiées.</p>
<p>Alors qu'est ce qui manque ?? Ma réponse est dans le titre, ce sont les outils de développement, autant au niveau des IDE que de la création de contenu multimédia, ainsi qu’une certaine maturité des API.</p>
<p>Adobe et Macromedia ont développé Flash avant tout en proposant des outils aux créatifs. L'aspect développement n'est venu qu'après en complément. Ici avec HTML5, c'est un peu l'inverse, on a beaucoup d'API technique mais peu d'outil et surtout vraiment peu de choses orienté contenu. (A moins que vous comptiez les produits Adobe récemment réorientés vers HTML5 ?)</p>
<p>Je suis conscient qu'il existe des IDE très avancés ciblant Javascript (Webstorm, Aptana, FlashDevelop, FDT, je découvre juste) mais la syntaxe et le typage dynamique du langage semble limiter les fonctionnalités de refactoring possibles. Il semble naturel que chaque équipe souhaite choisir le langage de son choix en fonction de ses opinions et de son expérience. Et là les choses se gâtent un peu. Les solutions ne sont pas vraiment satisfaisantes. </p>
<p>Google propose GWT qui convertit un sous ensemble de Java en Javascript et est accompagné d'un ensemble de bibliothèques, et de nombreuses autres sont proposées par des tierces parties. Le projet est maintenant stable mais n'avance plus autant car une grande partie de l'équipe a basculé sur <a href="http://www.dartlang.org/">Dart</a>, qui se veut être un langage de remplacement de JS. Ceci créée une situation confuse : D'un coté GWT est moins attractive, Google s'est brouillé avec Mozilla et les inconditionnels d'un JS dynamiquement typé et Dart est encore à l'état de preversion technique inutilisable. Imaginer la tête d'un chef de projet fan de Google qui doit choisir une techno pour former une nouvelle équipe !</p>
<p>D'autre langages peuvent être convertis en JS, une liste entière se trouve ici : <a href="https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS">https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS</a> . <br />
Mais je ne vois rien qui sorte du lot et qui puisse s'imposer comme une alternative crédible et surtout sur lequel un ensemble d'outils puisse être bâti.</p>
<p>Enfin je cite sans le considérer réellement l'autre projet de Google <a href="http://www.chromium.org/nativeclient/pnacl/building-and-testing-portable-native-client">"Portable Native Client"</a>, qui vise à standardiser un format d'application quasi natives (sources C++, API Chrome + OpenGL) packagées en byte code LLVM pour la portabilité. Déjà ce n'est pas prêt et la réponse négative de Mozilla de collaborer à ce type d'approche augure mal de sa diffusion. Pourtant techniquement ça peut surement fonctionner.</p>
<p>Revenons donc aux bibliothèques JS. De très nombreuses sont disponibles et certaines ont évoluées vers des frameworks RIA entiers (ExtJS, SmartClient). Malheureusement elles sont basées sur le DOM, et non Canvas et je ne vois pas d'évolution en cours dans cette direction. Si Canvas a été créé, c'est bien que l'on ne peut pas tout faire avec DOM et CSS, ou alors j'ai raté un épisode ? Evidemment le poids de la rétro compatibilité pèse lourd.</p>
<p>Il existe certes quelques frameworks utilisant Canvas, mais ils sont quasi exclusivement orientés jeux, et centrés sur une boucle de rendu et non sur un système d’évenements. J’ai trouvé pour l’instant <a href="http://code.google.com/p/playn/">PlayN</a> (cross platform Android/HTML5, utilisant GWT) et <a href="http://labs.hyperandroid.com/animation">CAAT</a> (pur js).</p>
<p>Enfin, une étude plus poussée de l'état des API exposées par les navigateurs font apparaître des zones d'ombres génantes. Par exemple l'API de saisie des évenements claviers est implémentées de façon très variables entre les navigateurs, et il est même tellement difficile de déterminer précisément les caractères saisis sur les claviers internationaux que les développeurs de l'éditeur <a href="http://ace.ajax.org/">ACE</a> ont dû placé une TextArea cachée sous leur composant pour récupérer les caractères saisis.</p>
<p>Les jeux HTML5 attendent également un meilleur support du plein écran et la capture du curseur de la souris. J'ai trouvée une liste détaillées de souhaits ici :</p>
<p>
<a href="http://codeflow.org/entries/2011/sep/11/webgl-and-html5-challenges-for-the-future/">http://codeflow.org/entries/2011/sep/11/webgl-and-html5-challenges-for-the-future/</a>
</p>
<p>Je souhaite me préparer à des futurs projets web RIA et pour l’instant je me forme sur des librairies Javascript et les API fournies par les navigateurs. Mais j’imagine que la plate forme HTML5 n’explosera que quand des outils de productivité seront disponibles pour les développeurs et les créatifs et que quand les imperfections des API seront comblées. En attendant les hackers sont à la fête et profitent du rythme d'innovation rapide et de la pléthore de technos proposées.</p><div><a href="https://linuxfr.org/users/chansen/journaux/recherche-desesperement-framework-pour-application-ria-html5-basees-sur-canvas-et-non-le-dom.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/89501/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/chansen/journaux/recherche-desesperement-framework-pour-application-ria-html5-basees-sur-canvas-et-non-le-dom#comments">ouvrir dans le navigateur</a>
</p>
chansenhttps://linuxfr.org/nodes/89501/comments.atom