diff doc/api-js-starter.rst @ 191:633a25df450e

molko-js: miscellaneous fixes While here, import sphinx as experimental documentation.
author David Demelier <markand@malikania.fr>
date Sat, 07 Nov 2020 15:40:34 +0100
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/doc/api-js-starter.rst	Sat Nov 07 15:40:34 2020 +0100
@@ -0,0 +1,114 @@
+.. highlight:: javascript
+
+================
+Starter template
+================
+
+In this guide we will show you how to start developing. Open your favorite
+editor and create a Javascript file, in this example we will use ``main.js`` but
+the name does not matter.
+
+Opening a window
+----------------
+
+The very first thing to do is to open a window. To do this we use the
+:js:mod:`Molko.Window`. The function we are interested in is the window
+constructor :js:func:`Molko.Window.new`, it takes a title and a dimension.
+
+.. hint::
+   Altough the Javascript API does not expect a specific window size, the
+   default predefined objects make best fit using a resolution of 720p
+   (1280x720).
+
+Create a window::
+
+  var w = new Molko.Window("My first window", 1280, 720);
+
+Basic event handling
+--------------------
+
+Now that a window is opened, we need to dispatch user and events from the
+operating system to run and be able to draw our game to the screen.
+
+.. caution::
+   You must use this API at some point in your code otherwise your application
+   may look unresponsive on some platforms.
+
+To do this, we create an infinite loop and then at the beginning of our loop we
+will poll all events until it is empty. This is done with the
+:js:mod:`Molko.Event` API.
+
+::
+
+  var run = true;
+
+  while (run) {
+    for (var ev; ev = Molko.Event.poll(); ev) {
+      switch (ev.type) {
+      case Molko.Event.QUIT:
+        run = false;
+        break;
+      default:
+        break;
+      }
+    }
+  }
+
+Rendering
+---------
+
+Our window is now ready to render things to the user. For this we may use
+several APIs like :js:mod:`Molko.Texture`, :js:mod:`Molko.Painter` and such. We
+will focus on the latter for now.
+
+.. caution::
+   You must create a window before using a painter.
+
+In this example, we will clear the black in screen and draw a small square in
+the middle of the screen.
+
+::
+
+  var p = new Molko.Painter()
+
+  // Clear the screen.
+  p.color = 0x000000ff;
+  p.clear();
+  p.color = 0xffffffff;
+  p.drawRectangle((1280 - 50) / 2, (720 - 50) / 2, 50, 50);
+  p.present();
+
+Final word
+----------
+
+That's it for the core API! You are now able to run a small script that clear
+the screen and catch user quit event.
+
+This is the whole code or our file:
+
+::
+
+  var w = new Molko.Window("My first window", 1280, 720);
+  var p = new Molko.Painter()
+
+  var run = true;
+
+  while (run) {
+    // Poll pending events.
+    for (var ev; ev = Molko.Event.poll(); ev) {
+      switch (ev.type) {
+      case Molko.Event.QUIT:
+        run = false;
+        break;
+      default:
+        break;
+      }
+    }
+
+    // Clear the screen.
+    p.color = 0x000000ff;
+    p.clear();
+    p.color = 0xffffffff;
+    p.drawRectangle((1280 - 50) / 2, (720 - 50) / 2, 50, 50);
+    p.present();
+  }