update comments

straker · Dec 21, 2019 · 18fc313 · 18fc313
1 parent 01a04ed
commit 18fc313
Show file tree

Hide file tree

Showing 27 changed files with 321 additions and 153 deletions.
diff --git a/docs/api/animation.html b/docs/api/animation.html
@@ -74,7 +74,7 @@ <h1>Animation(&#8203;properties)
 
         <p>An object for drawing sprite sheet animations.</p>
 <p>An animation defines the sequence of frames to use from a sprite sheet. It also defines at what speed the animation should run using <code>frameRate</code>.</p>
-<p>Typically you don&#39;t create an Animation directly, but rather you would create them from <a href="api/sprite">Sprite</a>Sheet by passing the <code>animations</code> argument.</p>
+<p>Typically you don&#39;t create an Animation directly, but rather you would create them from a <a href="api/spriteSheet">SpriteSheet</a> by passing the <code>animations</code> argument.</p>
 <div class="tablist">
   <ul role="tablist">
     <li role="presentation" data-tab="global">

diff --git a/docs/api/assets.html b/docs/api/assets.html
@@ -176,7 +176,7 @@ <h3 id="methods">Methods</h3>
               <ul aria-labelledby="methods">
                 <li>
                   <a href="api/assets#load">
-                    <span>load(&#8203;urls)</span>
+                    <span>load(&#8203;...urls)</span>
                   </a>
                 </li>
                 <li>
@@ -419,7 +419,7 @@ <h2 id="imageAssets">
         <section>
           <h2 id="load">
             <a href="api/assets#load" class="section-link">
-              <span>load(&#8203;urls)</span>
+              <span>load(&#8203;...urls)</span>
               <span aria-hidden="true">#</span>
             </a>
           </h2>
@@ -475,10 +475,10 @@ <h2 id="load">
           <h3 id="title-load"><span class="visually-hidden">load</span> Parameters</span></h3>
           <dl aria-labelledby="title-load">
             <dt>
-              <code>urls</code>
+              <code>...urls</code>
 
             </dt>
-            <dd><p>...an Array of Strings. Comma separated list of asset urls to load.</p>
+            <dd><p>A list of Strings. Comma separated list of asset urls to load.</p>
           </dd>
           </dl>
 

diff --git a/docs/api/events.html b/docs/api/events.html
@@ -131,7 +131,7 @@ <h3 id="methods">Methods</h3>
               <ul aria-labelledby="methods">
                 <li>
                   <a href="api/events#emit">
-                    <span>emit(&#8203;event, args)</span>
+                    <span>emit(&#8203;event, ...args)</span>
                   </a>
                 </li>
                 <li>
@@ -168,7 +168,7 @@ <h2 id="lifecycle-events">
         <section>
           <h2 id="emit">
             <a href="api/events#emit" class="section-link">
-              <span>emit(&#8203;event, args)</span>
+              <span>emit(&#8203;event, ...args)</span>
               <span aria-hidden="true">#</span>
             </a>
           </h2>
@@ -183,10 +183,10 @@ <h3 id="title-emit"><span class="visually-hidden">emit</span> Parameters</span><
             <dd><p>String. Name of the event.</p>
           </dd>
             <dt>
-              <code>args</code>
+              <code>...args</code>
 
             </dt>
-            <dd><p>...*. Arguments passed to all callbacks.</p>
+            <dd><p>A list of any type. Comma separated list of arguments passed to all callbacks.</p>
           </dd>
           </dl>
 

diff --git a/docs/api/gameobject.html b/docs/api/gameobject.html
@@ -69,10 +69,11 @@
       <div>
         <a href="https://github.com/straker/kontra" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 
-        <h1>GameObject(&#8203;[properties])
+        <h1>GameObject(&#8203;[properties], ...properties.props)
         </h1>
 
-        <p>A versatile way to update and draw your game objects. It can handle simple rectangles, images, and game object sheet animations. It can be used for your main player object as well as tiny particles in a particle engine.</p>
+        <p>The base class of most renderable classes. Handles things such as position, rotation, anchor, and the update and render life cycle.</p>
+<p>Typically you don&#39;t create a GameObject directly, but rather extend it for new classes. Because of this, trying to draw using a GameOjbect directly will prove difficult.</p>
         <h3 id="title-GameObject"><span class="visually-hidden">GameObject</span> Parameters</span></h3>
         <dl aria-labelledby="title-GameObject">
           <dt>
@@ -163,13 +164,13 @@ <h3 id="title-GameObject"><span class="visually-hidden">GameObject</span> Parame
             <code>properties.render</code>
             <span class="optional">Optional</span>
           </dt>
-          <dd><p>Function. Function called every frame to render the game object.</p>
+          <dd><p>Function. Function called every frame to render the game object. Is passed the current x and y position after rotation and anchor transforms have been applied. Use these to correctly draw the object.</p>
         </dd>
           <dt>
-            <code>properties.props</code>
+            <code>...properties.props</code>
 
           </dt>
-          <dd><p>...*. Any additional properties you need added to the game object. For example, if you pass <code>gameObject({type: &#39;player&#39;})</code> then the game object will also have a property of the same name and value. You can pass as many additional properties as you want.</p>
+          <dd><p>A list of any type. Any additional properties you need added to the game object. For example, if you pass <code>gameObject({type: &#39;player&#39;})</code> then the game object will also have a property of the same name and value. You can pass as many additional properties as you want.</p>
         </dd>
         </dl>
 
@@ -687,8 +688,8 @@ <h2 id="draw">
             </a>
           </h2>
 
-          <p>Draw the game object at its X and Y position. This function changes based on the type of the game object. For a [rectangle game object](api/gameObject#rectangle-game object), it uses <code>context.fillRect()</code>, for an [image game object](api/gameObject#image-game object) it uses <code>context.drawImage()</code>, and for an [animation game object](api/gameObject#animation-game object) it uses the <a href="api/gameObject#currentAnimation">currentAnimation</a> <code>render()</code> function.</p>
-<p>If you override the game objects <code>render()</code> function with your own render function, you can call this function to draw the game object normally.</p>
+          <p>Draw the game object at its X and Y position, taking into account rotation and anchor.</p>
+<p>If you override the game objects `render()`` function with your own render function, you can call this function to draw the game object normally.</p>
 <div class="tablist">
   <ul role="tablist">
     <li role="presentation" data-tab="global">
@@ -722,7 +723,7 @@ <h2 id="draw">
 });
 
 gameObject.render();</code></pre></section>
-  <section role="tabpanel" aria-labelledby=draw-es-tab data-tabpanel="es"><pre><code class="language-js">import { GameObject } from 'path/to/kontra.mjs';
+  <section role="tabpanel" aria-labelledby=draw-es-tab data-tabpanel="es"><pre><code class="language-js">let { GameObject } = kontra;
 
 let gameObject = GameObject({
  x: 290,
@@ -742,7 +743,7 @@ <h2 id="draw">
 });
 
 gameObject.render();</code></pre></section>
-  <section role="tabpanel" aria-labelledby=draw-bundle-tab data-tabpanel="bundle"><pre><code class="language-js">import { GameObject } from &#39;kontra&#39;;
+  <section role="tabpanel" aria-labelledby=draw-bundle-tab data-tabpanel="bundle"><pre><code class="language-js">let { GameObject } = kontra;
 
 let gameObject = GameObject({
  x: 290,
@@ -840,7 +841,7 @@ <h2 id="localPosition">
             </a>
           </h2>
 
-          <p>The game objects local position vector, which is its position relative to a parent object. If the game object does not have a parent object, the local position will be the same as the [position vector](api/gameObject#position].</p>
+          <p>The game objects local position vector, which is its position relative to a parent object. If the game object does not have a parent object, the local position will be the same as the <a href="api/gameObject#position">position vector</a>.</p>
 
         </section>
         <section>
@@ -851,7 +852,7 @@ <h2 id="localRotation">
             </a>
           </h2>
 
-          <p>The game objects local rotation, which is its rotation relative to a parent object. If the game object does not have a parent object, the local rotation will be the same as the [rotation](api/gameObject#rotation].</p>
+          <p>The game objects local rotation, which is its rotation relative to a parent object. If the game object does not have a parent object, the local rotation will be the same as the <a href="api/gameObject#rotation">rotation</a>.</p>
 
         </section>
         <section>
@@ -905,6 +906,7 @@ <h2 id="render">
           </h2>
 
           <p>Render the game object. Calls the game objects <a href="api/gameObject#draw">draw()</a> function.</p>
+<p>If you override the game objects render() function with your own render function, you can call <code>this.draw()</code> to draw the game object normally.</p>
 
         </section>
         <section>

diff --git a/docs/api/pointer.html b/docs/api/pointer.html
@@ -256,12 +256,12 @@ <h3 id="methods">Methods</h3>
                 </li>
                 <li>
                   <a href="api/pointer#track">
-                    <span>track(&#8203;objects)</span>
+                    <span>track(&#8203;...objects)</span>
                   </a>
                 </li>
                 <li>
                   <a href="api/pointer#untrack">
-                    <span>untrack(&#8203;objects)</span>
+                    <span>untrack(&#8203;...objects)</span>
                   </a>
                 </li>
               </ul>
@@ -644,7 +644,7 @@ <h3><span class="visually-hidden">pointerPressed</span> Return value</h3>
         <section>
           <h2 id="track">
             <a href="api/pointer#track" class="section-link">
-              <span>track(&#8203;objects)</span>
+              <span>track(&#8203;...objects)</span>
               <span aria-hidden="true">#</span>
             </a>
           </h2>
@@ -685,18 +685,18 @@ <h2 id="track">
           <h3 id="title-track"><span class="visually-hidden">track</span> Parameters</span></h3>
           <dl aria-labelledby="title-track">
             <dt>
-              <code>objects</code>
+              <code>...objects</code>
 
             </dt>
-            <dd><p>...an Array of Objects. Objects to track.</p>
+            <dd><p>A list of Objects. Objects to track.</p>
           </dd>
           </dl>
 
         </section>
         <section>
           <h2 id="untrack">
             <a href="api/pointer#untrack" class="section-link">
-              <span>untrack(&#8203;objects)</span>
+              <span>untrack(&#8203;...objects)</span>
               <span aria-hidden="true">#</span>
             </a>
           </h2>
@@ -731,10 +731,10 @@ <h2 id="untrack">
           <h3 id="title-untrack"><span class="visually-hidden">untrack</span> Parameters</span></h3>
           <dl aria-labelledby="title-untrack">
             <dt>
-              <code>objects</code>
+              <code>...objects</code>
 
             </dt>
-            <dd><p>...an Array of Objects. Object or objects to stop tracking.</p>
+            <dd><p>A list of Objects. Object or objects to stop tracking.</p>
           </dd>
           </dl>
 

diff --git a/docs/api/quadtree.html b/docs/api/quadtree.html
@@ -140,7 +140,7 @@ <h3 id="methods">Methods</h3>
               <ul aria-labelledby="methods">
                 <li>
                   <a href="api/quadtree#add">
-                    <span>Quadtree&#8203;.add(&#8203;objects)</span>
+                    <span>Quadtree&#8203;.add(&#8203;...objects)</span>
                   </a>
                 </li>
                 <li>
@@ -238,7 +238,7 @@ <h2 id="basic-use">
         <section>
           <h2 id="add">
             <a href="api/quadtree#add" class="section-link">
-              <span>Quadtree&#8203;.add(&#8203;objects)</span>
+              <span>Quadtree&#8203;.add(&#8203;...objects)</span>
               <span aria-hidden="true">#</span>
             </a>
           </h2>
@@ -342,10 +342,10 @@ <h2 id="add">
           <h3 id="title-add"><span class="visually-hidden">add</span> Parameters</span></h3>
           <dl aria-labelledby="title-add">
             <dt>
-              <code>objects</code>
+              <code>...objects</code>
 
             </dt>
-            <dd><p>...an Array of Objects. Objects to add to the quadtree.</p>
+            <dd><p>A list of Objects. Objects to add to the quadtree.</p>
           </dd>
           </dl>
 

diff --git a/docs/api/sprite.html b/docs/api/sprite.html
@@ -73,7 +73,7 @@ <h1>Sprite(&#8203;[properties])
         </h1>
 
         <p>A versatile way to update and draw your sprites. It can handle simple rectangles, images, and sprite sheet animations. It can be used for your main player object as well as tiny particles in a particle engine.</p>
-          <p><strong>Extends:</strong> GameObject</p>
+          <p><strong>Extends:</strong> <a href="api/gameObject">GameObject</a></p>
         <h3 id="title-Sprite"><span class="visually-hidden">Sprite</span> Parameters</span></h3>
         <dl aria-labelledby="title-Sprite">
           <dt>

diff --git a/docs/api/text.html b/docs/api/text.html
@@ -121,7 +121,7 @@ <h1>Text(&#8203;properties)
 });
 text.render();</code></pre></section>
 </div>
-          <p><strong>Extends:</strong> GameObject</p>
+          <p><strong>Extends:</strong> <a href="api/gameObject">GameObject</a></p>
         <h3 id="title-Text"><span class="visually-hidden">Text</span> Parameters</span></h3>
         <dl aria-labelledby="title-Text">
           <dt>
@@ -163,8 +163,85 @@ <h3 id="title-Text"><span class="visually-hidden">Text</span> Parameters</span><
         </dl>
 
 
-
-
+        <section class="toc">
+          <h2 id="toc"><a href="#toc" class="section-link">Table of Contents<span aria-hidden="true">#</span></a></h2>
+
+          <ul aria-labelledby="toc">
+
+            <li>
+              <h3 id="properties">Properties</h3>
+              <ul aria-labelledby="properties">
+                <li>
+                  <a href="api/text#color">
+                    <span>Text&#8203;.color</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="api/text#font">
+                    <span>Text&#8203;.font</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="api/text#text">
+                    <span>Text&#8203;.text</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="api/text#textAlign">
+                    <span>Text&#8203;.textAlign</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+
+          </ul>
+        </section>
+
+
+        <section>
+          <h2 id="color">
+            <a href="api/text#color" class="section-link">
+              <span>Text&#8203;.color</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>The color of the text.</p>
+
+        </section>
+        <section>
+          <h2 id="font">
+            <a href="api/text#font" class="section-link">
+              <span>Text&#8203;.font</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>The font style.</p>
+
+        </section>
+        <section>
+          <h2 id="text">
+            <a href="api/text#text" class="section-link">
+              <span>Text&#8203;.text</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>The string of text.</p>
+
+        </section>
+        <section>
+          <h2 id="textAlign">
+            <a href="api/text#textAlign" class="section-link">
+              <span>Text&#8203;.textAlign</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>The text alignment.</p>
+
+        </section>
 
       </div>
     </main>