Aperçu

Ce texte est une modification partielle de ce qui a été fait comme matériel pédagogique pour les classes de programmation pour les élèves du premier et du secondaire.

Vous apprendrez à utiliser Nyle-canvas, qui vous permet de démarrer immédiatement la programmation de jeux Ruby avec juste un navigateur.

Et en tant qu'application, je vise à créer moi-même des jeux tels que "blockbreak".

Explication technique

Qu'est-ce que Nyle-canvas?

Nyle-canvas est un environnement de développement intégré qui intègre un éditeur Ruby et un environnement d'exécution qui s'exécute sur le navigateur. C'est une méthode qui a été récemment adoptée pour le développement dans divers langages de programmation tels que Scratch.

La meilleure caractéristique est que vous pouvez facilement commencer à programmer Ruby si vous disposez d'un navigateur d'ordinateur ou de tablette (Chrome, etc.) et d'un environnement Internet.

Caractéristiques de Nyle-canvas

Pas besoin d'installer Ruby
Aucun éditeur ou logiciel de terminal ("invite de commande", "PowerShell", "terminal", etc.) requis
Fonctionne sur divers systèmes d'exploitation (Windows, macOS, Linux, Android, iPadOS, iOS, etc.)
Peut également fonctionner sur les tablettes et les smartphones --Le programme fonctionne indépendamment du système d'exploitation --Peut être exécuté immédiatement sans opération de sauvegarde
Gestion intégrée des données d'image
Peut être écrit au format compatible DXRuby

Environnement d'exploitation requis pour Nyle-canvas

--Browser (Chrome, etc.)

Connexion Internet --OS qui exécute le navigateur (Windows, macOS, Linux, Android, iPadOS, iOS, etc.)
PC, tablette (avec clavier externe), smartphone (* Certaines opérations de l'écran tactile sont également prises en charge)

Vous pouvez commencer la programmation immédiatement sans la préparation compliquée qui était nécessaire avant de commencer la programmation. De plus, si le navigateur fonctionne, il fonctionnera non seulement sur les PC mais également sur diverses machines telles que les tablettes (iPad, etc.).

Et le programme écrit peut être exécuté immédiatement sans opération de sauvegarde, et le résultat de la programmation peut être vérifié rapidement et facilement autant de fois que nécessaire. De plus, vous êtes libéré de la gestion des fichiers programme et des données d'image, et du basculement entre plusieurs logiciels.

En plus de ce qui précède, il est également intéressant de pouvoir utiliser Nyle-canvas avec presque la même description que DXRuby, qui est souvent utilisée comme bibliothèque de jeux 2D pour Ruby. Par conséquent, il répond également à des demandes telles que "Je veux utiliser les ressources du programme écrites en DXRuby" et "Je veux développer des jeux en écrivant DXRuby sur Mac". ..

Nyle-canvas est une œuvre qui a remporté le 12e Fukuoka Ruby Award (2019) Excellence Award. http://www.digitalfukuoka.jp/topics/144?locale=ja

Éléments techniques

Il utilise l'API HTML5 Canvas, Ruby → l'analyseur Javascript Opal, l'éditeur Javascript Ace.js, l'API DXRuby, etc.

Nyle-canvas (style DXRuby)

Dans ce texte, nous utiliserons le "style DXRuby" compatible avec l'API DXRuby parmi les styles de description Nyle-canvas.

Principales différences avec l'API DXRuby

・ Il n'y a pas de ʻImage.new`

Toutes les classes d'image sont créées à partir de ʻImage.load (fichier image)`

・ Il n'y a pas de `classe Sprite`

・ Comment spécifier la couleur

Tableau à 4 éléments au format «[A, R, G, B]» (A est «valeur α»; transparence), ou constante de couleur («C_BLACK», etc.)

・ ʻImage.set_color_key (color) `n'est pas pris en charge

Sera pris en charge dans un autre format

(Actuellement, la couleur blanche de l'image ʻImage.load` est automatiquement transparente)

・ Il n'y a pas de `Window.caption =`

・ Lorsque vous écrivez plusieurs `Window.loop do ~ end`, ne les écrivez pas en parallèle.

・ `Window.close`

Le dessin de la fenêtre s'arrête au lieu de fermer la fenêtre

・ ʻ Quitter` ne ferme pas la fenêtre

・ Un seul fichier de programme

・ Prise en charge du fonctionnement de l'écran tactile

Fonctionnalités non prises en charge par DXRuby

・ Le son n'est pas pris en charge

Sera pris en charge par dev3

Page d'accueil de Nyle-Canvas

--Page d'accueil de style toile https://spoolkitamura.github.io/nyle-canvas/

Éditeur de style toile (style DXRuby); écran de l'éditeur pour la programmation réelle Depuis "Page d'accueil de Nyle-canvas", cliquez sur le lien "DXRuby style".
Manuel de Nyle-canvas; comment utiliser l'éditeur https://spoolkitamura.github.io/nyle-canvas/dev2/site/manual_editor.html

Site de référence

Page DXRuby qui est l'original du "style DXRuby";

--Page d'accueil du DXRuby http://dxruby.osdn.jp

--DXRuby 1.4.6 Manuel de référence http://mirichi.github.io/dxruby-doc/index.html

--DXRuby 1.4.1 Manuel de référence http://dxruby.osdn.jp/DXRubyReference/20095313382446.htm

Un article expliquant comment utiliser DXRuby;

Bibliothèque de jeux 2D pour Ruby DXRuby: Principes d'utilisation de --Qiita https://qiita.com/noanoa07/items/bced6519d9b53685b651

D'autres bibliothèques compatibles avec l'API DXRuby qui fonctionnent dans le navigateur;

DXOpal https://yhara.github.io/dxopal/doc/ja/index.html

https://yhara.github.io/dxopal/index.html

Programmation de jeux commençant par Ruby - Édition DXOpal --Rubyist Magazine n ° 0057 https://magazine.rubyist.net/articles/0057/0057-GameProgramingWithDXOpal.html

Sites liés à ce texte

Comme étape suivante dans ce texte, créons un "saut de bloc".

Programmation Ruby avec juste un navigateur: "Blockbreaking" qui crée pas à pas (édition Nyle-canvas) --Qiita https://qiita.com/noanoa07/items/7d2f8e0354b9ad119d64

Environnement d'exécution de ce texte

--Navigateur; Google Chrome (version 83.0.4103.61, 64 bits, version macOS)

OS d'exécution; macOS（Catalina 10.15.5）

De plus, nous avons confirmé l'opération sur Safari / macOS et Chrome / Windows10 le cas échéant.

Version correspondante

Nyle-canvas (style DXRuby); dev2 (publié le 30/05/2020)

Code source de ce texte

https://github.com/noanoa07/nyle-canvas-intro

Licence de ce texte

Le commentaire, le code source Ruby et les données d'image de ce texte sont tous du domaine public.

(Le code source de Nyle-canvas est sous licence MIT)

Explication du programme

1. 1. Comment utiliser Nyle-canvas

Tout d'abord, faisons l'expérience de l'utilisation de base de Nyle-canvas.

1-1. Éditeur Nyle-canvas

Pour Nyle-canvas, l'écran d'édition du programme (éditeur) s'affiche en accédant au site suivant avec un navigateur.

Depuis "Page d'accueil de Nyle-canvas", cliquez sur le lien "DXRuby style". Voici l'écran de l'éditeur Nyle-canvas.

De plus, nous expliquerons ici l'utilisation de Google Chrome comme navigateur. (L'environnement d'exécution est macOS.)

1-2. Explication de l'écran de l'éditeur

Le programme de base est affiché à l'avance sur l'écran de l'éditeur. De plus, divers boutons sont alignés dans le coin supérieur gauche de l'écran. De la droite -- ▶ ︎ bouton ； Exécution du programme -- Bouton ↓; Enregistrer le programme (télécharger)

Bouton T; Réglage de la police (taille de la police) --? Bouton; Aller à l'écran d'aide (référence)

1-3. Exécution du programme (rb_dx00.html)

Le programme de base étant affiché à l'avance, appuyez sur la touche ▶ ︎ pour le moment pour exécuter le programme.

`rb_dx00.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code pour le dessin d'écran(your draw code here)
  
end

Cela ouvrira un nouvel onglet dans votre navigateur avec un carré noir. Ceci est l'écran de la fenêtre de base.

Comme vous pouvez le voir, la principale caractéristique de Nyle-canvas est que ** les programmes peuvent être exécutés immédiatement sans enregistrer d'opérations **.

1-3a. Réexécuter le programme

Pour exécuter à nouveau le programme, ** "Recharger" sur l'écran d'exécution.

Comment "recharger":

--Appuyez sur le bouton "" ↻ "en haut du navigateur`

Sélectionnez Menu> Fichier> Affichage> Recharger la page --Raccourci; (macOS) Commande + R, (Windows) Ctrl + R

1-3b. Fermer l'écran d'exécution

Pour fermer l'écran d'exécution du programme, fermez l'onglet de l'écran d'exécution. Appuyez sur le bouton «×» en haut de l'écran.

--Raccourci; (macOS) Commande + W, (Windows) Ctrl + W

1-4. Enregistrer le programme

Essayez de sauvegarder ce programme. Appuyez sur le bouton ↓ pour afficher une boîte de dialogue et appuyez sur OK pour télécharger le programme. La destination du téléchargement dépend des paramètres du navigateur, mais il semble que ce soit souvent le dossier «Télécharger».

De cette façon, le dossier de téléchargement contient des fichiers nommés d'après la date et l'heure.

Notez que le fichier programme enregistré est un ** fichier HTML **. Ce fichier contient non seulement la partie programme de Ruby, mais également toutes les données à exécuter dans le navigateur, et même les données d'image.

Si vous voulez voir ce qu'il y a dans le fichier HTML, vous pouvez le vérifier en l'ouvrant dans un éditeur.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Nyle-canvas</title>
<!-- Nyle-canvas editor v0.8.0 -->
</head>
<body>
<script type="text/javascript" src="https://spoolkitamura.github.io/nyle-canvas/dev2/jslib/opal/opal.min.js" onload="Opal.load('opal')"></script>
<script type="text/javascript" src="https://spoolkitamura.github.io/nyle-canvas/dev2/jslib/opal/opal-parser_patched.min.js" onload="Opal.load('opal-parser')"></script>
<script type="text/javascript" src="https://spoolkitamura.github.io/nyle-canvas/dev2/jslib/opal/native.min.js" onload="Opal.load('native')"></script>
<script type="text/javascript" src="https://spoolkitamura.github.io/nyle-canvas/dev2/nyle-canvas.js"></script>
<script type="text/javascript">
</script>
<script type="text/ruby">
include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code pour le dessin d'écran(your draw code here)
  
end
</script>
</body>
</html>

Comme vous pouvez le voir, le programme Ruby est intégré dans le fichier HTML.

De plus, comme le fichier est un fichier HTML, le programme sera exécuté simplement en «double-cliquant» directement »ou« en le faisant glisser et en le déposant dans n'importe quelle fenêtre du navigateur »».

1-5. Renommer le programme enregistré

Le nom du fichier programme enregistré peut être modifié de la manière standard du système d'exploitation de renommer le fichier.

1-6. Charger le programme

Pour afficher ou modifier le contenu du programme enregistré, faites glisser et déposez le fichier du programme (fichier HTML) sur l'écran de l'éditeur Nyle-canvas de votre navigateur.

Ensuite, une boîte de dialogue s'ouvrira et il vous sera demandé "Voulez-vous charger le fichier déposé?", Alors appuyez sur ʻOK` pour le charger.

D'ailleurs, si vous enregistrez à nouveau le fichier chargé, il semble qu'il sera écrasé avec le même nom, mais en réalité il ne sera pas écrasé **, et il sera enregistré séparément avec un nom différent tel que xxxx (1) .html. Sera fait. (Le comportement détaillé dépend de l'environnement d'exécution.)

1-7. Créer un nouveau programme

Si vous souhaitez créer un nouveau programme, cliquez sur "Recharger" sur l'écran de l'éditeur Nyle-canvas de votre navigateur pour revenir à l'état initial.

Comment "recharger":

--Appuyez sur le bouton "" ↻ "en haut du navigateur`

Sélectionnez Menu> Fichier> Affichage> Recharger la page --Raccourci; (macOS) Commande + R, (Windows) Ctrl + R

1-8. indication d'erreur

Lorsque vous appuyez sur le bouton d'exécution (bouton ▶ ︎), une vérification grammaticale est effectuée et si une erreur est détectée, le panneau vous en informera avant l'exécution.

Dans cet exemple, une erreur se produit car ʻend` est manquant.

Cependant, même si aucune erreur n'est affichée à ce stade, une erreur peut se produire lors de l'exécution. Dans ce cas, il sera affiché dans la console suivante.

1-9. Comment ouvrir la console

Les erreurs d'exécution et les résultats «put» sont imprimés sur la «console» du navigateur. Commençons par afficher la console.

Comment ouvrir dans Chrome; (** sur l'écran d'exécution **)

a) Commun à macOS et Windows

Appuyez sur la touche F12 (ou fn + F12)
(N'importe où sur l'écran); Clic droit (clic à deux doigts, etc.)> Vérification> Sélectionnez `` Console "` dans les outils de développement ouverts

b) macOS --Sélectionnez Menu> Affichage> Développement / Gestion> Console Javascript --Raccourci; Commande + ʻOption + J`

c) Windows --Menu ＞ ʻAutres outils＞Outils de développement ＞ Sélectionnez" Console "` dans les outils de développement ouverts

--Raccourci; Ctrl + Maj + J

Référence) Comment changer la position d'affichage de la console

La position où la console Chrome (outils de développement) est affichée peut être sur le côté inférieur ou sur le côté droit selon les paramètres.

Pour changer la mise en page à votre convenance, cliquez sur les trois points verticaux (entourés en rouge) à l'extrémité droite du bouton «" ︙ "» et un menu apparaîtra. Sélectionnez parmi les icônes «Côté Dock».

Ici, il était affiché sur le côté droit.

1-10. Comment utiliser la console

A) Vérifiez le message d'erreur

Vous pouvez voir le message d'erreur lorsque le programme est exécuté et qu'une erreur se produit.

Cet écran d'exécution est un écran vide en raison d'une erreur.

Voici l'écran qui ouvre la console. Le message d'erreur s'affiche sur la ligne rouge.

Cependant, ce message d'erreur peut prêter à confusion. (Parce que Javascript est exécuté en interne via Ruby → l'analyseur Javascript Opal.)

À tout le moins, il est assez utile de cocher "Avez-vous une erreur maintenant?"

B) Afficher la sortie des put et p (rb_dx00a.html)

La console est également la destination de sortie pour put et p.

`rb_dx00a.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = DX::C_BLACK

puts "Hello!"                  #◆ Ajout
p "salut!"         #◆ Ajout

Window.loop do
  #Code pour le dessin d'écran(your draw code here)
  
end

Lorsque vous exécutez ce programme, Bonjour à la console!, " Bonjour! " Et vous pouvez voir la sortie.

1-11. Aide (référence)

Appuyez sur le bouton «»? »En haut à gauche de l'écran de l'éditeur Nyle-canvas pour ouvrir l'écran d'aide (référence).

→ \ [Nyle-canvas] API Reference (style DXRuby) https://spoolkitamura.github.io/nyle-canvas/dev2/site/_man_api_dx/index.html

L'API de Nyle-canvas est brièvement résumée, veuillez donc l'utiliser de plus en plus lorsque vous avez des problèmes.

1-12. Faites attention aux caractères pleine largeur

Non seulement Nyle-canvas, mais la plupart des langages de programmation n'autorisent pas les caractères pleine largeur comme instructions. En particulier, s'il y a un espace pleine largeur (caractère vide), il sera difficile à trouver même si une erreur se produit, alors soyez prudent.

1-13. Fonction pratique (raccourci clavier)

Puisque Ace.js est utilisé pour la partie éditeur de Nyle-canvas, la plupart des raccourcis clavier d'Ace.js peuvent être utilisés.

https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

Voici quelques fonctionnalités qui peuvent être particulièrement utiles.

Rechercher / remplacer	Windows	macOS
Chercher	Ctrl + F	Command + F
Remplacement	Ctrl + H	Command + Option + F
Rechercher	Ctrl + K	Command + G
Rechercher avant	Ctrl + Shift + K	Command + Shift + G

Retrait	Windows	macOS
Ajouter un retrait	Tab	Tab
Supprimer le retrait	Shift + Tab	Shift + Tab

commentaire	Windows	macOS
Commenter / Supprimer	Ctrl + /	Command + /

1-14. Comment programmer avec Nyle-canvas

Avec Nyle-canvas, vous pouvez exécuter votre programme édité immédiatement sans l'enregistrer. Par conséquent, la méthode "réécrire un peu et déplacer un peu" convient.

Faisons-le de cette façon dans les exercices suivants.

2. Pratique Nyle-canvas

* À propos du fichier .html et du fichier .rb

Le programme qui s'exécute sur Nyle-canvas est le fichier .html. (L'exemple de programme se trouve dans le dossier src / dx_html.)

Cependant, dans l'explication suivante, seule la partie programme de Ruby sera répertoriée. (Il y a un fichier .rb avec le même nom dans le dossier src / dx_ruby.)

2-0. Ouvrir une fenêtre (rb_dx00.html)

Comme vous l'avez expérimenté dans 1-3., Lorsque vous ouvrez l'écran de l'éditeur Nyle-canvas, le code de base est déjà écrit à l'avance.

(Si vous réécrivez, veuillez "recharger" l'écran comme décrit dans "1-7. Créer un nouveau programme".)

`rb_dx00.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code pour le dessin d'écran(your draw code here)
  
end

Par défaut, une fenêtre 640 horizontale, 480 verticale et noire s'ouvre.

Le coin supérieur gauche est l'origine (x = 0, y = 0), l'horizontale (x) augmente vers la droite et la verticale (y) augmente vers le bas.

Le code écrit entre «Window.loop do ~ end» est exécuté 60 fois par seconde à plusieurs reprises.

→ Référence DXRuby: Tutoriel 1. Formulaire de base http://mirichi.github.io/dxruby-doc/tutorial/basic.html

2-1. Changer la taille de la fenêtre (rb_dx01.html)

Utilisez Window.width = et Window.height = pour redimensionner la fenêtre.

Ecrivez le programme avant Window.loop do ~ end s'il n'est exécuté que la première fois et qu'il n'a pas besoin d'être exécuté par la suite.

`rb_dx01.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 200       #◇ Changer
Window.height  = 150       #◇ Changer
Window.bgcolor = C_BLACK

Window.loop do
  #Code pour le dessin d'écran(your draw code here)
  
end

2-2. Changer la couleur d'arrière-plan de la fenêtre (rb_dx02.html)

Utilisez Window.bgcolor = pour changer la couleur d'arrière-plan de la fenêtre.

Pour spécifier la couleur, voir "Informations sur la couleur" dans "Référence API" affichée en appuyant sur le bouton aide de l'éditeur Nyle-canvas.

`rb_dx02.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640       #◇ Changer (retour)
Window.height  = 480       #◇ Changer (retour)
Window.bgcolor = C_CYAN    #◇ Changer

Window.loop do
  #Code pour le dessin d'écran(your draw code here)
  
end

2-3. Afficher les caractères à l'écran (rb_dx03.html)

Pour mettre des personnages à l'écran

Spécifiez la taille des caractères (et le nom de la police) avec font = Font.new (taille des caractères)

Window.draw_font (position x, position y," chaîne ", police, {: color => couleur})

Il est affiché avec.

`rb_dx03.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK    #◇ Changer (retour)

font = Font.new(32)         #◆ Ajout

Window.loop do
  Window.draw_font(200, 100, "Rupture de bloc", font, {:color => C_GREEN})   #◆ Ajout
end

2-4. Capturer les frappes (rb_dx04.html)

Pour la saisie par clé, utilisez ʻInput.key_down? (Constante de code clé) `.

Pour les "constantes de code clé", voir "Informations sur les codes clé" dans Aide>" Référence API ".

`rb_dx04.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

font = Font.new(32)

Window.loop do
  Window.draw_font(150, 100, "Appuyez sur la touche A", font, {:color => C_GREEN})  #◇ Changer
  
  if Input.key_down?(K_A)                                        #◆ Ajout
    Window.draw_font(300, 250, "A", font, {:color => C_WHITE})   #◆ Ajout
  end                                                            #◆ Ajout
end

Lorsque vous appuyez sur la touche «A», «A» s'affiche à l'écran.

2-5. Affichage des chiffres (rb_dx05.html)

Affichez les formes de base dans la fenêtre.

Vous pouvez afficher des lignes, des lignes droites, des carrés et des cercles. Pour afficher, utilisez respectivement les commandes suivantes.

--Point: Window.draw_pixel

Ligne droite: Window.draw_line --Square: Window.draw_box --Square (fill): Window.draw_box_fill --Yen: Window.draw_circle --Cercle (remplissage): Window.draw_circle_fill

Une «classe Image» distincte est fournie pour charger, déplacer et manipuler les images.

`rb_dx05.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK


Window.loop do
  Window.draw_box_fill(100, 100, 540, 380, C_YELLOW)   #◇ Changer
end

2-6. Charger l'image (rb_dx06.html)

Nyle-Canvas gère les fichiers image un peu différemment de DXRuby.

Tout d'abord, faites glisser et déposez le fichier image que vous souhaitez utiliser directement sur l'écran de l'éditeur. Ensuite, le fichier image sera copié dans Nyle-canvas et sera affiché sous forme de liste de données d'image au bas de l'écran de l'éditeur.

Pour tester, faites glisser et déposez le fichier ʻapple.png dans le dossier src / image` sur l'écran de l'éditeur.

Le fichier image ʻapple.png` a été copié et affiché dans la liste. (* Les majuscules et les minuscules peuvent être inférieures.)

En passant, les données d'image dans la liste peuvent être récupérées par glisser-déposer '' l'icône d'image ou par clic droit '' (clic à deux doigts, etc.)> `` Enregistrer l'image sous ''. (* Le nom du fichier peut être download.)

De plus, si vous appuyez sur le bouton «Annuler» sur le côté droit de l'image, les données d'image dont vous n'avez plus besoin disparaîtront de la liste.

De cette manière, la gestion intégrée des fichiers image et des programmes est une caractéristique majeure de Nyle-canvas.

Ensuite, utilisez ʻImage.load (nom du fichier image) pour charger et utiliser le fichier image du programme. Ici, le nom de chemin, etc. qui indique l'emplacement n'est pas nécessaire` avant le nom du fichier image.

L'image chargée sera dans la ʻImage class`.

Pour afficher la classe Image, utilisezWindow.draw (coordonnée x, coordonnée y, image). La référence des coordonnées est la partie supérieure gauche de l'image.

`rb_dx06.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')   #◆ Ajout

Window.loop do
  Window.draw(100, 100, apple)    #◆ Ajout
end

Référence) Qu'arrive-t-il aux données d'image lorsqu'un programme contenant des images est enregistré?

Ouvrez le programme enregistré (fichier HTML) avec votre éditeur habituel. (Partiellement omis)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Nyle-canvas</title>
<!-- Nyle-canvas editor v0.8.0 -->
</head>
<body>
<script>
(réduction)
</script>
<script type="text/javascript">
Store.createImage('apple.png', 100, 100, 'data:image/png;base64,iVBORw（...Omis en chemin...）SuQmCC')
</script>
<script type="text/ruby">
include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')   #◆ Ajout

Window.loop do
  Window.draw(100, 100, apple)    #◆ Ajout
end
</script>
</body>
</html>

De cette façon, dans la partie de 'apple.png', 100, 100, 'data: image / png; base64, iVBORw ....', les données d'image de ʻapple.png` sont encodées en Base64 et ensemble. Vous pouvez voir qu'il est enregistré dans.

C'est donc un mécanisme qui vous permet de vous concentrer sur la programmation sans vous soucier de la gestion des données d'image utilisées dans le programme.

Remarque) À propos de la transparence des images

Dans dev2 sorti le 30 mai 2020, la couleur blanche de l'image est automatiquement rendue transparente au moment de ʻImage.load`.

2-7. Agrandissement / réduction de l'image (rb_dx07.html)

Si vous souhaitez agrandir / réduire l'image, utilisez Window.draw_scale (position x, position y, image, taux d'agrandissement horizontal, taux d'agrandissement vertical).

`rb_dx07.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')

Window.loop do
  Window.draw_scale(100, 100, apple, 0.5, 0.5)    #◇ Changer
end

2-8. Déplacer avec les touches fléchées (rb_dx08.html)

Lorsque la touche curseur est enfoncée, ʻInput.x dans le sens gauche-droite et ʻInput.y dans le sens haut-bas changent en -1, 0, 1.

En utilisant ceci, vous pouvez le déplacer sur l'écran.

`rb_dx08.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')
x = 200                       #◆ Ajout
y = 200                       #◆ Ajout

Window.loop do
  x = x + Input.x             #◆ Ajout
  y = y + Input.y             #◆ Ajout
  
  Window.draw(x, y, apple)    #◇ Changer
end

2-09. Se déplacer avec les touches fléchées (une autre façon d'écrire) (rb_dx09.html)

Une autre façon d'écrire ball.x = ball.x + Input.x,

Réécrivons-le comme ball.x + = Input.x. Il a la même signification, mais comme il nécessite moins de caractères, il peut réduire les erreurs.

`rb_dx09.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')
x = 200
y = 200

Window.loop do
  x += Input.x               #◇ Changer
  y += Input.y               #◇ Changer
  
  Window.draw(x, y, apple)
end

2-10. Déplacer avec la souris (rb_dx10.html)

Les coordonnées x et y de la souris peuvent être obtenues avec ʻInput.mouse_x et ʻInput.mouse_y, respectivement.

Dans le cas d'une image, la référence des coordonnées est en haut à gauche.

`rb_dx10.rb`


include DX
#Code pour la configuration initiale(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')


Window.loop do
  x = Input.mouse_x               #◇ Changer
  y = Input.mouse_y               #◇ Changer
  
  Window.draw(x, y, apple)
end

C'est la fin de la pratique du Nyle-canvas.

Problème d'application

Maintenant que vous êtes habitué à utiliser Nyle-canvas, faisons un "block break"!

Programmation Ruby avec juste un navigateur: "Blockbreaking" qui crée pas à pas (édition Nyle-canvas) --Qiita https://qiita.com/noanoa07/items/7d2f8e0354b9ad119d64

La programmation de jeux Ruby a commencé avec un navigateur: Introduction à Nyle-canvas (style DXRuby)

Aperçu

Explication technique

Qu'est-ce que Nyle-canvas?

Caractéristiques de Nyle-canvas

Environnement d'exploitation requis pour Nyle-canvas

Éléments techniques

Nyle-canvas (style DXRuby)

Principales différences avec l'API DXRuby

・ Il n'y a pas de ʻImage.new`

・ Il n'y a pas de classe Sprite

・ Comment spécifier la couleur

・ ʻImage.set_color_key (color) `n'est pas pris en charge

・ Il n'y a pas de Window.caption =

・ Lorsque vous écrivez plusieurs Window.loop do ~ end, ne les écrivez pas en parallèle.

・ Window.close

・ ʻ Quitter` ne ferme pas la fenêtre

・ Un seul fichier de programme

・ Prise en charge du fonctionnement de l'écran tactile

・ Le son n'est pas pris en charge

Page d'accueil de Nyle-Canvas

Site de référence

Sites liés à ce texte

Environnement d'exécution de ce texte

Version correspondante

Code source de ce texte

Licence de ce texte

Explication du programme

1. 1. Comment utiliser Nyle-canvas

1-1. Éditeur Nyle-canvas

1-2. Explication de l'écran de l'éditeur

1-3. Exécution du programme (rb_dx00.html)

rb_dx00.rb

1-3a. Réexécuter le programme

1-3b. Fermer l'écran d'exécution

1-4. Enregistrer le programme

1-5. Renommer le programme enregistré

1-6. Charger le programme

1-7. Créer un nouveau programme

1-8. indication d'erreur

1-9. Comment ouvrir la console

a) Commun à macOS et Windows

Référence) Comment changer la position d'affichage de la console

1-10. Comment utiliser la console

A) Vérifiez le message d'erreur

B) Afficher la sortie des put et p (rb_dx00a.html)

rb_dx00a.rb

1-11. Aide (référence)

1-12. Faites attention aux caractères pleine largeur

1-13. Fonction pratique (raccourci clavier)

1-14. Comment programmer avec Nyle-canvas

2. Pratique Nyle-canvas

* À propos du fichier .html et du fichier .rb

2-0. Ouvrir une fenêtre (rb_dx00.html)

rb_dx00.rb

2-1. Changer la taille de la fenêtre (rb_dx01.html)

rb_dx01.rb

2-2. Changer la couleur d'arrière-plan de la fenêtre (rb_dx02.html)

rb_dx02.rb

2-3. Afficher les caractères à l'écran (rb_dx03.html)

rb_dx03.rb

2-4. Capturer les frappes (rb_dx04.html)

rb_dx04.rb

2-5. Affichage des chiffres (rb_dx05.html)

rb_dx05.rb

2-6. Charger l'image (rb_dx06.html)

rb_dx06.rb

Référence) Qu'arrive-t-il aux données d'image lorsqu'un programme contenant des images est enregistré?

Remarque) À propos de la transparence des images

2-7. Agrandissement / réduction de l'image (rb_dx07.html)

rb_dx07.rb

2-8. Déplacer avec les touches fléchées (rb_dx08.html)

rb_dx08.rb

2-09. Se déplacer avec les touches fléchées (une autre façon d'écrire) (rb_dx09.html)

rb_dx09.rb

2-10. Déplacer avec la souris (rb_dx10.html)

rb_dx10.rb

Problème d'application

・ Il n'y a pas de `classe Sprite`

・ Il n'y a pas de `Window.caption =`

・ Lorsque vous écrivez plusieurs `Window.loop do ~ end`, ne les écrivez pas en parallèle.

・ `Window.close`

`rb_dx00.rb`

`rb_dx00a.rb`

`rb_dx00.rb`

`rb_dx01.rb`

`rb_dx02.rb`

`rb_dx03.rb`

`rb_dx04.rb`

`rb_dx05.rb`

`rb_dx06.rb`

`rb_dx07.rb`

`rb_dx08.rb`

`rb_dx09.rb`

`rb_dx10.rb`