Überblick

Dieser Text ist eine teilweise Modifikation dessen, was als Unterrichtsmaterial für Programmierkurse für Schüler der Mittel- und Oberstufe erstellt wurde.

Sie lernen den Umgang mit Nyle-Canvas, mit dem Sie die Ruby-Spielprogrammierung sofort mit nur einem Browser starten können.

Und als Anwendung möchte ich Spiele wie "Block Breaking" selbst erstellen.

Technische Erklärung

Was ist Nyle-Leinwand?

Nyle-canvas ist eine integrierte Entwicklungsumgebung, die einen Ruby-Editor und eine Ausführungsumgebung integriert, die im Browser ausgeführt werden. Dies ist eine Methode, die kürzlich für die Entwicklung in verschiedenen Programmiersprachen wie Scratch übernommen wurde.

Die beste Funktion ist, dass Sie Ruby problemlos programmieren können, wenn Sie über einen Computer- oder Tablet-Browser (Chrome usw.) und eine Internetumgebung verfügen.

Eigenschaften von Nyle-Leinwand

Ruby muss nicht installiert werden
Keine Editor- oder Terminalsoftware ("Eingabeaufforderung", "PowerShell", "Terminal" usw.) erforderlich
Funktioniert auf verschiedenen Betriebssystemen (Windows, MacOS, Linux, Android, iPadOS, iOS usw.)
Kann auch auf Tablet-Geräten und Smartphones betrieben werden
Das Programm arbeitet unabhängig vom Betriebssystem
Kann sofort ausgeführt werden, ohne den Vorgang zu speichern
Integrierte Verwaltung von Bilddaten
Kann im DXRuby-kompatiblen Format geschrieben werden

Betriebsumgebung für Nyle-Canvas erforderlich

--Browser (Chrome usw.)

Internetverbindung --OS, auf dem der Browser ausgeführt wird (Windows, MacOS, Linux, Android, iPadOS, iOS usw.)

http://www.digitalfukuoka.jp/topics/144?locale=ja

! Wenn der Browser funktioniert, funktioniert er nicht nur auf PCs, sondern auch auf verschiedenen Computern wie Tablets (iPad usw.). Und das geschriebene Programm kann sofort ausgeführt werden, ohne den Betrieb zu speichern, und das Ergebnis der Programmierung kann schnell und einfach so oft wie nötig überprüft werden. Darüber hinaus können Sie keine Programmdateien und Bilddaten verwalten und zwischen mehreren Softwareprogrammen wechseln. Darüber hinaus ist es attraktiv, dass Nyle-Canvas mit fast derselben Beschreibung wie DXRuby betrieben werden kann, das häufig als 2D-Spielbibliothek für Ruby verwendet wird. Daher reagiert es auch auf Anfragen wie "Ich möchte die in DXRuby geschriebenen Programm-Assets verwenden" und "Ich möchte Spiele entwickeln, indem ich DXRuby auf Mac schreibe". .. Nyle-canvas ist eine Arbeit, die mit dem 12. Fukuoka Ruby Award (2019) Excellence Award ausgezeichnet wurde. Technische Elemente

Es verwendet die HTML5-Canvas-API, Ruby → Javascript-Parser Opal, den Javascript-Editor Ace.js, die DXRuby-API usw.

Nyle-Canvas (DXRuby-Stil)

In diesem Text verwenden wir den DXRuby-API-kompatiblen "DXRuby-Stil" unter den Nyle-Canvas-Beschreibungsstilen.

Hauptunterschiede zur DXRuby-API

・ Es gibt kein `Image.new`

Alle "Bildklassen" werden aus "Image.load (Bilddatei)" erstellt

・ Es gibt keine Sprite-Klasse

・ So legen Sie die Farbe fest

4-Element-Array im Format "[A, R, G, B]" (A ist "α-Wert"; Transparenz) oder Farbkonstante ("C_BLACK" usw.)

-`Image.set_color_key (color)` wird nicht unterstützt

Wird in einem anderen Format unterstützt

(Derzeit ist die weiße Farbe des Bildes "Image.load" automatisch transparent.)

・ Es gibt kein `Window.caption =`

・ Wenn Sie mehrere `Window.loop do ~ end` schreiben, schreiben Sie sie nicht parallel.

・ `Window.close`

Das Zeichnen von Fenstern wird gestoppt, anstatt das Fenster zu schließen

・ Das Fenster schließt auch bei `exit` nicht

・ Nur eine Programmdatei

・ Unterstützung für den Touchpanel-Betrieb

Funktionen, die von DXRuby nicht unterstützt werden

・ Sound wird nicht unterstützt

Wird von dev3 unterstützt

Nyle-Canvas-Homepage

--Nyle-Canvas-Homepage https://spoolkitamura.github.io/nyle-canvas/

--Nyle-Canvas-Editor (DXRuby-Stil); Editor-Bildschirm für die eigentliche Programmierung Klicken Sie auf den Link "DX Ruby-Stil" unter "Nyle-canvas-Homepage".

--Nyle-Canvas-Handbuch, Bedienung des Editors https://spoolkitamura.github.io/nyle-canvas/dev2/site/manual_editor.html

Referenzseite

DXRuby-Seite, die das Original des "DXRuby-Stils" ist;

--DXRuby Homepage http://dxruby.osdn.jp

--DXRuby 1.4.6 Referenzhandbuch http://mirichi.github.io/dxruby-doc/index.html

--DXRuby 1.4.1 Referenzhandbuch http://dxruby.osdn.jp/DXRubyReference/20095313382446.htm

Ein Artikel zur Verwendung von DXRuby;

--2D-Spielbibliothek für Ruby DXRuby: Grundlagen zur Verwendung von --Qiita https://qiita.com/noanoa07/items/bced6519d9b53685b651

Andere DXRuby API-kompatible Bibliotheken, die im Browser funktionieren;

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

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

Spielprogrammierung beginnend mit Ruby - DXOpal Edition - Rubyist Magazine Nr. 0057 https://magazine.rubyist.net/articles/0057/0057-GameProgramingWithDXOpal.html

Ausführungsumgebung dieses Textes

--Browser; Google Chrome (Version 83.0.4103.61, 64-Bit, MacOS-Version)

Ausführungsbetriebssystem; macOS（Catalina 10.15.5）

Darüber hinaus haben wir den Vorgang unter Safari / macOS und Chrome / Windows10 entsprechend bestätigt.

Entsprechende Version

Nyle-Canvas (DXRuby-Stil); dev2 (veröffentlicht am 30.05.2020)

Quellcode für diesen Text

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

Lizenz dieses Textes

Der Kommentar, der Ruby-Quellcode und die Bilddaten in diesem Text sind alle gemeinfrei.

(Nyle-Canvas-Quellcode ist MIT-lizenziert)

Programmerklärung

1. 1. Wie benutzt man Nyle-Canvas?

Lassen Sie uns zunächst die grundlegende Verwendung von Nyle-Canvas kennenlernen.

1-1. Nyle-Canvas-Editor

Bei Nyle-canvas wird der Programmbearbeitungsbildschirm (Editor) angezeigt, indem Sie mit einem Browser auf die folgende Site zugreifen.

Klicken Sie auf den Link "DX Ruby-Stil" unter "Nyle-canvas-Homepage". Dies ist der Nyle-Canvas-Editor-Bildschirm.

Außerdem erklären wir hier die Verwendung von Google Chrome als Browser. (Die Ausführungsumgebung ist macOS.)

1-2. Erläuterung des Editorbildschirms

Das Basisprogramm wird vorab auf dem Editorbildschirm angezeigt. Darüber hinaus befinden sich oben links auf dem Bildschirm verschiedene Schaltflächen. Von rechts -- ▶ ︎ button ； Programmausführung -- ↓ button; Programm speichern (Download) --T button; Einstellung für Schriftart (Schriftgröße) --? Button; Zum Hilfebildschirm (Referenzbildschirm) gehen

1-3. Programmausführung (rb_dx00.html)

Da das Basisprogramm im Voraus angezeigt wird, drücken Sie vorerst die Taste ▶ ︎, um das Programm auszuführen.

`rb_dx00.rb`


include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code für die Bildschirmzeichnung(your draw code here)
  
end

Dadurch wird in Ihrem Browser ein neuer Tab mit einem schwarzen Quadrat geöffnet. Dies ist der grundlegende Fensterbildschirm.

Wie Sie sehen können, besteht das Hauptmerkmal von Nyle-canvas darin, dass ** Programme sofort ausgeführt werden können, ohne Operationen zu speichern **.

1-3a. Programm erneut ausführen

Um das Programm erneut auszuführen, ** "Neu laden" auf dem Ausführungsbildschirm.

So "neu laden":

--Drücken Sie die Taste "↻" oben im Browser --Wählen Sie "Menü"> "Datei"> "Ansicht"> "Seite neu laden" --Shortcut; (macOS) Befehl + R, (Windows) Strg + R

1-3b. Schließen Sie den Ausführungsbildschirm

Schließen Sie die Registerkarte Ausführungsbildschirm, um den Programmausführungsbildschirm zu schließen. Drücken Sie die Taste "×" oben auf dem Bildschirm.

--Shortcut; (macOS) Befehl + W, (Windows) Strg + W

1-4. Programm speichern

Versuchen Sie, dieses Programm zu speichern. Wenn Sie die Taste "↓" drücken, wird ein Dialogfeld angezeigt, und wenn Sie "OK" drücken, wird das Programm heruntergeladen. Das Download-Ziel hängt von den Browsereinstellungen ab, aber es scheint, dass es sich häufig um den Ordner "Download" handelt.

Auf diese Weise enthält der Download-Ordner Dateien, die nach Datum und Uhrzeit benannt sind.

Beachten Sie, dass die gespeicherte Programmdatei eine ** HTML-Datei ** ist. Diese Datei enthält nicht nur den Programmteil von Ruby, sondern auch alle im Browser auszuführenden Daten und sogar die Bilddaten.

Wenn Sie sehen möchten, was sich in der HTML-Datei befindet, können Sie dies überprüfen, indem Sie sie in einem Editor öffnen.

<!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 für die Grundeinstellung(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code für die Bildschirmzeichnung(your draw code here)
  
end
</script>
</body>
</html>

Wie Sie sehen können, ist das Ruby-Programm in die HTML-Datei eingebettet.

Da es sich bei der Datei um eine HTML-Datei handelt, kann das Programm auch durch einfaches Doppelklicken oder Ziehen per Drag & Drop in ein beliebiges Fenster des Browsers ausgeführt werden.

1-5. Benennen Sie das gespeicherte Programm um

Der Name der gespeicherten Programmdatei kann auf die Standardmethode des Betriebssystems zum Umbenennen der Datei geändert werden.

1-6. Programm laden

Um den Inhalt des gespeicherten Programms anzuzeigen oder zu bearbeiten, ziehen Sie die Programmdatei (HTML-Datei) per Drag & Drop auf den Nyle-Canvas-Editor-Bildschirm Ihres Browsers.

Dann öffnet sich ein Dialogfeld und Sie werden gefragt: "Möchten Sie die abgelegte Datei laden?". Drücken Sie also "OK", um sie zu laden.

Übrigens, wenn Sie die geladene Datei erneut speichern, scheint es, dass sie mit demselben Namen überschrieben wird, aber in Wirklichkeit wird sie nicht überschrieben ** und mit verschiedenen Namen wie "xxxx (1) .html" gespeichert. Getan werden. (Das detaillierte Verhalten hängt von der Ausführungsumgebung ab.)

1-7. Neues Programm erstellen

Wenn Sie ein neues Programm erstellen möchten, klicken Sie im Nyle-Canvas-Editor Ihres Browsers auf "Neu laden", um zum Ausgangszustand zurückzukehren.

So "neu laden":

--Drücken Sie die Taste "↻" oben im Browser --Wählen Sie "Menü"> "Datei"> "Ansicht"> "Seite neu laden" --Shortcut; (macOS) Befehl + R, (Windows) Strg + R

1-8. Fehleranzeige

Wenn Sie die Schaltfläche Ausführen (▶ ︎ Taste) drücken, wird eine Grammatikprüfung durchgeführt. Wenn ein Fehler gefunden wird, werden Sie vom Bedienfeld vor der Ausführung benachrichtigt.

In diesem Beispiel handelt es sich um einen Fehler, da es kein "Ende" gibt.

Selbst wenn zu diesem Zeitpunkt kein Fehler angezeigt wird, kann zur Laufzeit ein Fehler auftreten. In diesem Fall wird es in der folgenden Konsole angezeigt.

1-9. So öffnen Sie die Konsole

Laufzeitfehler und "Puts" -Ergebnisse werden auf der "Konsole" des Browsers gedruckt. Lassen Sie uns zunächst die Konsole anzeigen.

So öffnen Sie in Chrome; (** auf dem Ausführungsbildschirm **)

a) Gemeinsam für MacOS und Windows

--Drücken Sie die Taste F12 (oder fn + F12)

(Überall auf dem Bildschirm); Rechtsklick (Zwei-Finger-Klick usw.)> Überprüfung> Wählen Sie in den geöffneten Entwicklertools `` Konsole ”`

b) macOS --Wählen Sie "Menü"> "Anzeige"> "Entwicklung / Verwaltung"> "Javascript Console" --Shortcut; Befehl + Option + J

c) Windows --Menü ＞ Andere Tools ＞ Entwicklertools ＞ Wählen Sie "Konsole" `aus den geöffneten Entwicklertools

--Kurzschnitt; Strg + Umschalt + J

Referenz) So ändern Sie die Anzeigeposition der Konsole

Die Position, an der die Chrome-Konsole (Entwicklertools) angezeigt wird, kann sich je nach Einstellungen auf der unteren oder rechten Seite befinden.

Um das Layout nach Ihren Wünschen zu ändern, klicken Sie auf die drei vertikalen Punkte (rot eingeschlossen) am rechten Ende der Schaltfläche "︙". Ein Menü wird angezeigt. Wählen Sie aus den Symbolen "Dock-Seite".

Hier wurde es auf der rechten Seite angezeigt.

1-10. Verwendung der Konsole

A) Überprüfen Sie die Fehlermeldung

Sie können die Fehlermeldung sehen, wenn das Programm ausgeführt wird und ein Fehler auftritt.

Dieser Ausführungsbildschirm ist aufgrund eines Fehlers ein leerer Bildschirm.

Hier ist der Bildschirm, der die Konsole öffnet. Die Fehlermeldung wird in der roten Linie angezeigt.

Diese Fehlermeldung kann jedoch verwirrend sein. (Da Javascript intern über Ruby → Javascript Parser Opal ausgeführt wird.)

Zumindest ist es nützlich genug, um "Gibt es jetzt einen Fehler?" Zu überprüfen und als Hinweis für den Fehler.

B) Zeigen Sie die Ausgabe von Puts und p an (rb_dx00a.html).

Die Konsole ist auch das Ausgabeziel für Puts und p.

`rb_dx00a.rb`


include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = DX::C_BLACK

puts "Hello!"                  #◆ Hinzufügung
p "Hallo!"         #◆ Hinzufügung

Window.loop do
  #Code für die Bildschirmzeichnung(your draw code here)
  
end

Wenn Sie dieses Programm ausführen, "Hallo an die Konsole!", "Hallo!", Und Sie können die Ausgabe sehen.

1-11. Hilfe (Referenz)

Drücken Sie die Schaltfläche "?" Oben links im Nyle-Canvas-Editor, um den Hilfebildschirm (Referenzbildschirm) zu öffnen.

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

Die API von Nyle-canvas wird kurz zusammengefasst. Verwenden Sie sie daher immer häufiger, wenn Sie ein Problem haben.

1-12. Achten Sie auf Zeichen in voller Breite

Nicht nur Nyle-Canvas, sondern die meisten Programmiersprachen erlauben keine Zeichen in voller Breite als Anweisungen. Insbesondere wenn ein Leerzeichen in voller Breite (Leerzeichen) vorhanden ist, ist es schwierig, es zu finden, selbst wenn ein Fehler auftritt. Seien Sie also vorsichtig.

1-13. Praktische Funktion (Tastenkombination)

Da Ace.js für den Editor-Teil von Nyle-canvas verwendet wird, können die meisten Tastaturkürzel von Ace.js verwendet werden.

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

Hier sind einige Funktionen, die besonders nützlich sein können.

Ersatz finden	Windows	macOS
Suche	Ctrl + F	Command + F
Ersatz	Ctrl + H	Command + Option + F
Suchen nach	Ctrl + K	Command + G
Suche vorher	Ctrl + Shift + K	Command + Shift + G

Einzug	Windows	macOS
Einzug hinzufügen	Tab	Tab
Entfernen Sie den Einzug	Shift + Tab	Shift + Tab

Kommentar	Windows	macOS
Kommentieren / Entfernen	Ctrl + /	Command + /

1-14. Wie man mit Nyle-canvas programmiert

Mit Nyle-canvas können Sie Ihr bearbeitetes Programm sofort ausführen, ohne es zu speichern. Daher ist die Methode "ein wenig umschreiben und ein wenig verschieben" geeignet.

Machen wir es in den folgenden Übungen so.

2. Nyle-Canvas-Praxis

* Über `.html file` und `.rb file`

Das Programm, das auf Nyle-canvas ausgeführt wird, ist die .html-Datei. (Das Beispielprogramm befindet sich im Ordner "src / dx_html".)

In der folgenden Erklärung wird jedoch nur der Programmteil von Ruby aufgelistet. (Im Ordner "src / dx_ruby" befindet sich eine gleichnamige ".rb-Datei".)

2-0. Rufen Sie ein Fenster auf (rb_dx00.html)

Wie Sie in 1-3 erfahren haben, wird beim Öffnen des Nyle-Canvas-Editor-Bildschirms der Basiscode bereits im Voraus geschrieben.

(Wenn Sie neu schreiben, "laden" Sie den Bildschirm erneut, wie unter "1-7. Erstellen eines neuen Programms" beschrieben.)

`rb_dx00.rb`


include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code für die Bildschirmzeichnung(your draw code here)
  
end

Standardmäßig wird ein 640 horizontales, 480 vertikales und schwarzes Fenster geöffnet.

Bei den Koordinaten ist oben links der Ursprung (x = 0, y = 0), die Horizontale (x) nimmt nach rechts zu und die Vertikale (y) nimmt nach unten zu.

Der zwischen "Window.loop do ~ end" geschriebene Code wird 60 Mal pro Sekunde wiederholt ausgeführt.

→ DXRuby-Referenz: Lernprogramm 1. Grundformular http://mirichi.github.io/dxruby-doc/tutorial/basic.html

2-1. Ändern Sie die Größe des Fensters (rb_dx01.html)

Verwenden Sie "Window.width =" und "Window.height =", um die Größe des Fensters zu ändern.

Schreiben Sie das Programm vor "Window.loop do ~ end", wenn es nur beim ersten Mal ausgeführt wird und danach nicht mehr ausgeführt werden muss.

`rb_dx01.rb`


include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 200       #◇ Ändern
Window.height  = 150       #◇ Ändern
Window.bgcolor = C_BLACK

Window.loop do
  #Code für die Bildschirmzeichnung(your draw code here)
  
end

2-2. Ändern Sie die Hintergrundfarbe des Fensters (rb_dx02.html)

Verwenden Sie Window.bgcolor =, um die Hintergrundfarbe des Fensters zu ändern.

Informationen zum Festlegen der Farbe finden Sie unter "Informationen zur Farbe" in der "API-Referenz", die durch Drücken der Hilfeschaltfläche des Nyle-Canvas-Editors angezeigt wird.

`rb_dx02.rb`


include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 640       #◇ Ändern (zurück)
Window.height  = 480       #◇ Ändern (zurück)
Window.bgcolor = C_CYAN    #◇ Ändern

Window.loop do
  #Code für die Bildschirmzeichnung(your draw code here)
  
end

2-3. Zeichen auf dem Bildschirm anzeigen (rb_dx03.html)

Zeichen auf den Bildschirm bringen

Geben Sie die Zeichengröße (und den Schriftnamen) mit "font = Font.new (Zeichengröße)" an

Window.draw_font (x-Position, y-Position," Zeichenfolge ", Schriftart, {: color => color})

Es wird mit angezeigt.

`rb_dx03.rb`


include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK    #◇ Ändern (zurück)

font = Font.new(32)         #◆ Hinzufügung

Window.loop do
  Window.draw_font(200, 100, "Blockbrechen", font, {:color => C_GREEN})   #◆ Hinzufügung
end

2-4. Tastatureingaben erfassen (rb_dx04.html)

Verwenden Sie "Input.key_down? (Schlüsselcodekonstante)" für die Schlüsseleingabe.

Informationen zu "Schlüsselcodekonstanten" finden Sie unter "Schlüsselcodeinformationen" in "Hilfe"> "API-Referenz".

`rb_dx04.rb`


include DX
#Code für die Grundeinstellung(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, "Drücken Sie die A-Taste", font, {:color => C_GREEN})  #◇ Ändern
  
  if Input.key_down?(K_A)                                        #◆ Hinzufügung
    Window.draw_font(300, 250, "A", font, {:color => C_WHITE})   #◆ Hinzufügung
  end                                                            #◆ Hinzufügung
end

Wenn Sie die Taste "A" drücken, wird "A" auf dem Bildschirm angezeigt.

2-5. Anzeige von Zahlen (rb_dx05.html)

Grundformen im Fenster anzeigen.

Sie können Linien, gerade Linien, Quadrate und Kreise anzeigen. Verwenden Sie zum Anzeigen die folgenden Befehle.

--Point: Window.draw_pixel

Gerade Linie: Window.draw_line --Square: Window.draw_box --Square (fill): Window.draw_box_fill
Yen: Window.draw_circle --Circle (fill): Window.draw_circle_fill

Zum Laden, Verschieben und Bearbeiten von Bildern wird eine separate "Bildklasse" bereitgestellt.

`rb_dx05.rb`


include DX
#Code für die Grundeinstellung(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)   #◇ Ändern
end

2-6. Bild laden (rb_dx06.html)

Nyle-Canvas behandelt Bilddateien etwas anders als DXRuby.

Ziehen Sie zunächst die Bilddatei, die Sie verwenden möchten, direkt auf den Editorbildschirm. Anschließend wird die Bilddatei in Nyle-canvas kopiert und als Liste der Bilddaten am unteren Rand des Editorbildschirms angezeigt.

Ziehen Sie als Test die Datei "apple.png " in den Ordner "src / image" und legen Sie sie auf dem Editorbildschirm ab.

Die Bilddatei apple.png wurde kopiert und in der Liste angezeigt. (* Groß- und Kleinschreibung können Kleinbuchstaben sein.)

Übrigens können die Bilddaten in der Liste durch Ziehen und Ablegen des Bildsymbols oder durch Rechtsklick (Zwei-Finger-Klick usw.)> "Bild speichern unter" abgerufen werden. (* Der Dateiname kann "Download" sein.)

Wenn Sie auf der rechten Seite des Bildes auf die Schaltfläche "Abbrechen" klicken, werden die nicht mehr benötigten Bilddaten aus der Liste entfernt.

Auf diese Weise ist die integrierte Verwaltung von Bilddateien und Programmen ein wichtiges Merkmal von Nyle-canvas.

Verwenden Sie als Nächstes "Image.load (Name der Bilddatei)", um die Bilddatei aus dem Programm zu laden und zu verwenden. Hier ist der "Pfadname usw., der den Speicherort angibt" vor dem Namen der Bilddatei nicht erforderlich.

Das geladene Bild befindet sich in der Bildklasse.

Verwenden Sie zum Anzeigen der Bildklasse "Window.draw (x-Koordinate, y-Koordinate, Bild)". Die Referenz der Koordinaten befindet sich oben links im Bild.

`rb_dx06.rb`


include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')   #◆ Hinzufügung

Window.loop do
  Window.draw(100, 100, apple)    #◆ Hinzufügung
end

Referenz) Was passiert mit den Bilddaten, wenn ein Programm mit Bildern gespeichert wird?

Öffnen Sie das gespeicherte Programm (HTML-Datei) mit Ihrem üblichen Editor. (Teilweise weggelassen)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Nyle-canvas</title>
<!-- Nyle-canvas editor v0.8.0 -->
</head>
<body>
<script>
(Kürzung)
</script>
<script type="text/javascript">
Store.createImage('apple.png', 100, 100, 'data:image/png;base64,iVBORw（...Unterwegs weggelassen...）SuQmCC')
</script>
<script type="text/ruby">
include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')   #◆ Hinzufügung

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

Auf diese Weise werden in dem Teil von "apple.png ", 100, 100, "data: image / png; base64, iVBORw ...." die Bilddaten von "apple.png " in Base64 und zusammen codiert. Sie können sehen, dass es in gespeichert ist.

Daher ist es ein Mechanismus, mit dem Sie sich auf die Programmierung konzentrieren können, ohne sich um die Verwaltung der im Programm verwendeten Bilddaten kümmern zu müssen.

Hinweis) Informationen zur Transparenz von Bildern

In dev2, das am 30. Mai 2020 veröffentlicht wurde, wird die weiße Farbe des Bildes zum Zeitpunkt von Image.load automatisch transparent gemacht.

2-7. Bild vergrößern / verkleinern (rb_dx07.html)

Wenn Sie das Bild vergrößern / verkleinern möchten, verwenden Sie "Window.draw_scale (x-Position, y-Position, Bild, horizontales Vergrößerungsverhältnis, vertikales Vergrößerungsverhältnis)".

`rb_dx07.rb`


include DX
#Code für die Grundeinstellung(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)    #◇ Ändern
end

2-8. Mit den Cursortasten bewegen (rb_dx08.html)

Wenn die Cursortaste gedrückt wird, ändert sich "Input.x" in horizontaler Richtung in "-1", "0", "1" und in vertikaler Richtung in "Input.y".

Auf diese Weise können Sie es auf dem Bildschirm verschieben.

`rb_dx08.rb`


include DX
#Code für die Grundeinstellung(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')
x = 200                       #◆ Hinzufügung
y = 200                       #◆ Hinzufügung

Window.loop do
  x = x + Input.x             #◆ Hinzufügung
  y = y + Input.y             #◆ Hinzufügung
  
  Window.draw(x, y, apple)    #◇ Ändern
end

2-09. Bewegen Sie sich mit den Cursortasten (eine andere Schreibweise) (rb_dx09.html)

Eine andere Möglichkeit, ball.x = ball.x + Input.x zu schreiben,

Schreiben wir es als ball.x + = Input.x um. Es hat die gleiche Bedeutung, aber da es weniger Zeichen erfordert, kann es Fehler reduzieren.

`rb_dx09.rb`


include DX
#Code für die Grundeinstellung(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               #◇ Ändern
  y += Input.y               #◇ Ändern
  
  Window.draw(x, y, apple)
end

2-10. Mit der Maus bewegen (rb_dx10.html)

Die x- und y-Koordinaten der Maus können mit "Input.mouse_x" bzw. "Input.mouse_y" erhalten werden.

Bei einem Bild ist die Referenz der Koordinaten oben links.

`rb_dx10.rb`


include DX
#Code für die Grundeinstellung(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               #◇ Ändern
  y = Input.mouse_y               #◇ Ändern
  
  Window.draw(x, y, apple)
end

Dies ist das Ende der Nyle-Canvas-Praxis.

Anwendungsproblem

Jetzt, da Sie es gewohnt sind, Nyle-Canvas zu verwenden, machen wir einen "Block Break"!

Ruby-Programmierung mit nur einem Browser: "Block Breaking" (Nyle-Canvas-Edition), die Schritt für Schritt erstellt - Qiita https://qiita.com/noanoa07/items/7d2f8e0354b9ad119d64

Die Programmierung von Ruby-Spielen begann mit einem Browser: Einführung in Nyle-Canvas (DXRuby-Stil)

Überblick

Technische Erklärung

Was ist Nyle-Leinwand?

Eigenschaften von Nyle-Leinwand

Betriebsumgebung für Nyle-Canvas erforderlich

Nyle-Canvas (DXRuby-Stil)

Hauptunterschiede zur DXRuby-API

・ Es gibt kein Image.new

・ Es gibt keine Sprite-Klasse

・ So legen Sie die Farbe fest

-Image.set_color_key (color) wird nicht unterstützt

・ Es gibt kein Window.caption =

・ Wenn Sie mehrere Window.loop do ~ end schreiben, schreiben Sie sie nicht parallel.

・ Window.close

・ Das Fenster schließt auch bei exit nicht

・ Nur eine Programmdatei

・ Unterstützung für den Touchpanel-Betrieb

・ Sound wird nicht unterstützt

Nyle-Canvas-Homepage

Referenzseite

Verwandte Seiten dieses Textes

Ausführungsumgebung dieses Textes

Entsprechende Version

Quellcode für diesen Text

Lizenz dieses Textes

Programmerklärung

1. 1. Wie benutzt man Nyle-Canvas?

1-1. Nyle-Canvas-Editor

1-2. Erläuterung des Editorbildschirms

1-3. Programmausführung (rb_dx00.html)

rb_dx00.rb

1-3a. Programm erneut ausführen

1-3b. Schließen Sie den Ausführungsbildschirm

1-4. Programm speichern

1-5. Benennen Sie das gespeicherte Programm um

1-6. Programm laden

1-7. Neues Programm erstellen

1-8. Fehleranzeige

1-9. So öffnen Sie die Konsole

a) Gemeinsam für MacOS und Windows

Referenz) So ändern Sie die Anzeigeposition der Konsole

1-10. Verwendung der Konsole

A) Überprüfen Sie die Fehlermeldung

B) Zeigen Sie die Ausgabe von Puts und p an (rb_dx00a.html).

rb_dx00a.rb

1-11. Hilfe (Referenz)

1-12. Achten Sie auf Zeichen in voller Breite

1-13. Praktische Funktion (Tastenkombination)

1-14. Wie man mit Nyle-canvas programmiert

2. Nyle-Canvas-Praxis

* Über .html file und .rb file

2-0. Rufen Sie ein Fenster auf (rb_dx00.html)

rb_dx00.rb

2-1. Ändern Sie die Größe des Fensters (rb_dx01.html)

rb_dx01.rb

2-2. Ändern Sie die Hintergrundfarbe des Fensters (rb_dx02.html)

rb_dx02.rb

2-3. Zeichen auf dem Bildschirm anzeigen (rb_dx03.html)

rb_dx03.rb

2-4. Tastatureingaben erfassen (rb_dx04.html)

rb_dx04.rb

2-5. Anzeige von Zahlen (rb_dx05.html)

rb_dx05.rb

2-6. Bild laden (rb_dx06.html)

rb_dx06.rb

Referenz) Was passiert mit den Bilddaten, wenn ein Programm mit Bildern gespeichert wird?

Hinweis) Informationen zur Transparenz von Bildern

2-7. Bild vergrößern / verkleinern (rb_dx07.html)

rb_dx07.rb

2-8. Mit den Cursortasten bewegen (rb_dx08.html)

rb_dx08.rb

2-09. Bewegen Sie sich mit den Cursortasten (eine andere Schreibweise) (rb_dx09.html)

rb_dx09.rb

2-10. Mit der Maus bewegen (rb_dx10.html)

rb_dx10.rb

Anwendungsproblem

・ Es gibt kein `Image.new`

-`Image.set_color_key (color)` wird nicht unterstützt

・ Es gibt kein `Window.caption =`

・ Wenn Sie mehrere `Window.loop do ~ end` schreiben, schreiben Sie sie nicht parallel.

・ `Window.close`

・ Das Fenster schließt auch bei `exit` nicht

`rb_dx00.rb`

`rb_dx00a.rb`

* Über `.html file` und `.rb file`

`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`