Skip to content

Commit

Permalink
Update index.html (#3079)
Browse files Browse the repository at this point in the history 
Fixed plenking, some capitalization, missing images.
  • Loading branch information
@Alien426
Alien426 authored Mar 13, 2021
1 parent cb9640b commit 5d08394
Showing 1 changed file with 50 additions and 60 deletions.
110 changes: 50 additions & 60 deletions files/en-us/games/visual-js_game_engine/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,35 +12,35 @@

<h2 id="Full_name_Visual-js_GUI_for_windows_Multiplatform_2d_Game_engine">Full name : Visual-js GUI for windows <em>Multiplatform 2d Game engine</em></h2>

<p>creator : Nikola Lukic 2017 </p>
<p>creator: Nikola Lukic 2017</p>

<p>2018 open source</p>

<h3 id="Visual-js_project_parts">Visual-js project parts : </h3>
<h3 id="Visual-js_project_parts">Visual-js project parts:</h3>

<h4 id="-2D_PART_This_is_JavaScript_game_engine_(server_part_node.js_client_part_js)_Js_framework_with_windows_GUI_editor_and_game_instance_creator._(_server_engine_tools_server_part_of_web_apps_)">-2D PART :  <br>
This is JavaScript game engine  (server part node.js / client part js)<br>
Js framework with windows GUI editor and game instance creator.<br>
( + server engine tools + server part of web apps ) </h4>
( + server engine tools + server part of web apps )</h4>

<h4 id="-3D_PART_webgl_based_on_three.js_engine">-3D PART :<br>
<h4 id="-3D_PART_webgl_based_on_three.js_engine">-3D PART:<br>
webgl based on three.js engine</h4>

<h4 id="-3D_PART_webGL2_based_on_glmatrix_2.0">-3D PART :<br>
<h4 id="-3D_PART_webGL2_based_on_glmatrix_2.0">-3D PART:<br>
webGL2 based on glmatrix 2.0</h4>

<h4 id="-2D_PART_(new)_This_is_TypeScript_based_game_engine_(client_part_ts)._With_strong_connection_with_webpack_Physics_done_with_(matter.js)_matter_ts">-2D PART (new):  <br>
This is TypeScript based game engine  (client part ts).<br>
With strong connection with webpack <br>
Physics done with (matter.js) matter ts </h4>
With strong connection with webpack<br>
Physics done with (matter.js) matter ts</h4>

<div class="notecard warning">
<p>This part is removed from this project. New link is : https://github.com/zlatnaspirala/visual-ts-game-engine</p>
<p>This part is removed from this project. New link is: https://github.com/zlatnaspirala/visual-ts-game-engine</p>
</div>

<h3 id="Basic_licence_rules">Basic license rules :</h3>
<h3 id="Basic_licence_rules">Basic license rules:</h3>

<p>1) Each file in this project has its own license , be careful , do not violate the basic rules.</p>
<p>1) Each file in this project has its own license, be careful, do not violate the basic rules.</p>

<p>2) You are free to use any version of Visual JS library in any other project (even commercial projects)<br>
   as long as the copyright header is left intact Except for plugins on sale and graphics that come with<br>
Expand All @@ -52,16 +52,16 @@ <h3 id="Basic_licence_rules">Basic license rules :</h3>
      In no event shall the author of this software be held liable for data loss,<br>
      damages, loss of profits or any other kind of loss while using or misusing this software.</p>

<p><strong>External licenses in this project : </strong></p>
<p><strong>External licenses in this project:</strong></p>

<ul>
<li>
<p>Webcam NUI control is under : Created by Romuald Quantin. <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow">http://creativecommons.org/licenses/by-nc-sa/3.0/</a></p>
<p>Webcam NUI control is under: Created by Romuald Quantin. <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow">http://creativecommons.org/licenses/by-nc-sa/3.0/</a></p>

<p>Download from : <a href="https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html" rel="nofollow">https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html</a></p>
<p>Download from: <a href="https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html" rel="nofollow">https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html</a></p>
</li>
<li>
<p>WEBRTC - webcam communication is under :<br>
<p>WEBRTC - webcam communication is under:<br>
Creator Muaz Khan</p>

<p><a href="http://www.muazkhan.com/" rel="nofollow">www.MuazKhan.com</a> MIT License - <a href="http://www.webrtc-experiment.com/licence" rel="nofollow">www.WebRTC-Experiment.com/licence</a></p>
Expand All @@ -70,10 +70,10 @@ <h3 id="Basic_licence_rules">Basic license rules :</h3>
<p>Socket.io.js - <a href="http://socket.io/download/" rel="nofollow">http://socket.io/download/</a> ( also implemented intro build.js )</p>
</li>
<li>
<p>webgl2 based on : Copyright (C) 2014 Tappali Ekanathan Keestu (<a href="mailto:[email protected]">[email protected]</a>) GNU General Public License</p>
<p>webgl2 based on: Copyright (C) 2014 Tappali Ekanathan Keestu (<a href="mailto:[email protected]">[email protected]</a>) GNU General Public License</p>
</li>
<li>
<p>OBJ loader : <a href="https://github.com/frenchtoast747/webgl-obj-loader">https://github.com/frenchtoast747/webgl-obj-loader</a></p>
<p>OBJ loader: <a href="https://github.com/frenchtoast747/webgl-obj-loader">https://github.com/frenchtoast747/webgl-obj-loader</a></p>
</li>
<li>
<p>Textures download from <a href="http://textures.com/" rel="nofollow">http://textures.com</a></p>
Expand All @@ -88,28 +88,26 @@ <h3 id="Basic_licence_rules">Basic license rules :</h3>



<h3 id="About_GUI_for_windows_(canvas2d_part_only)">About GUI for windows (canvas2d part only) :</h3>
<h3 id="About_GUI_for_windows_(canvas2d_part_only)">About GUI for windows (canvas2d part only):</h3>

<p><em>windows GUI application version 1.0 (using visual-js 0.9 lib)<br>
Important : you will need NET 4.5.2 minimum also redistribution pack for c++</em></p>
Important: you will need NET 4.5.2 minimum also redistribution pack for c++</em></p>

<p>How to start project ?</p>

<p>1) Click CREATE APPLICATION <br>
2) Enter new application name in input prompt<br>
3) Select folder for server part of application (important : www is not secure place)<br>
3) Select folder for server part of application (important: www is not secure place)<br>
4) Select folder for client part of application ( any path in www)<br>
5) New app name will appear in project list , select and click OPEN APPLICATION</p>
5) New app name will appear in project list, select and click OPEN APPLICATION</p>

<p><img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAjQAAAAJDU2ODFjZmU3LWZlOWEtNDVhNS1hOTE0LWRhNDM4MTMzZTZlYg.png"></p>

<p>6) Open your server folder : </p>
<p>6) Open your server folder: </p>

<p>Install node.js modules </p>

<p>One way - Use windows <strong>bat</strong>-s file (in server root folder with prefix install_ )</p>

<p>Second way - open <em><strong>cmd </strong></em>terminal and enter next command : </p>
<p>Second way - open <em><strong>cmd </strong></em>terminal and enter next command: </p>

<ul>
<li>npm install mysql</li>
Expand All @@ -120,108 +118,100 @@ <h3 id="About_GUI_for_windows_(canvas2d_part_only)">About GUI for windows (canva
<li>npm install [email protected]</li>
</ul>

<p>Very easy installation and project files generator .</p>
<p>Very easy installation and project files generator.</p>

<p>Now you can use <em><strong>On-Page-Editor</strong></em> (nice for visual setup , checking positions and dimensions - not for logic ) . manual start from cmd : server_folder/node editor.js</p>
<p>Now you can use <em><strong>On-Page-Editor</strong></em> (nice for visual setup, checking positions and dimensions - not for logic). Manual start from cmd: server_folder/node editor.js</p>

<p>After starting On-Page-Editor open browser icon to open internet browser in editor mode . See video explanation : </p>
<p>After starting On-Page-Editor open browser icon to open internet browser in editor mode. See video explanation:</p>

<p>{{EmbedYouTube("MVp-JsAha94")}}</p>

<div class="warning">
<p>If you use editor.js to visual create game object method , you must start ***node build_from_editor_to_visual_js_file.js*** on the end of work.<br>
This tool will create visual.js in folder starter/ with all your game object was created in editor style .</p>
<p>If you use editor.js to visual create game object method, you must start ***node build_from_editor_to_visual_js_file.js*** on the end of work.<br>
This tool will create visual.js in folder starter/ with all your game object was created in editor style.</p>
</div>

<p>or you can use <em>Visual-JS Source editor<strong>.</strong></em></p>


<h3 id="Visual-JS_Source_editor_(2d_part_only)"><em><strong>Visual-JS Source editor  (2d part only)</strong></em></h3>

<p>is new and better way .In future visual staff will be better (real time simulator will be implemented).For now this place is good for coding .</p>
<p>is new and better way. In future visual staff will be better (real time simulator will be implemented).For now this place is good for coding.</p>

<div class="note">
<p>Visual-js works direct with project files , no need for build .</p>
<p>Visual-js works direct with project files, no need for build.</p>
</div>

<p>{{EmbedYouTube("kxUBPDhB-3I")}}</p>

<p>Add-&gt;New game object (<em>form dialog for define type of new game object </em>)<br>
Add-&gt;Quick code (<em>make your work faster - add usually code blocks)</em><br>
Resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine.<br>
Inserting new code will be always at current line selected intro editor .<br>
Save on drop menu or better with ctrl+s before testing in browsers. </p>

<p><strong>Adding new script explanation : </strong></p>

<p><img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAjbAAAAJDQ0MjZhOWRmLTg1Y2YtNGRhZS1iYjA3LWRmODIwYmNhZTczNw.png"></p>

<p>After adding new script and save script if you have extra changes , open starter/run.js and you will found line : </p>
Resources - explorer view for images and audios, you can drag or edit also need to execute node build_resources for creating resources object for engine.<br>
Inserting new code will be always at current line selected intro editor.<br>
Save on drop menu or better with ctrl+s before testing in browsers.</p>

<pre><code>SYS.SCRIPT.LOAD("scripts/new_script.js") </code></pre>
<p><strong>Adding new script explanation:</strong></p>

<p>ctrl+S </p>
<p>After adding new script and save script if you have extra changes, open starter/run.js and you will found line:</p>

<p>Use from menu <strong>Run</strong>-&gt;Choose browser for testing . - important safari not working at the moment</p>
<pre><code>SYS.SCRIPT.LOAD("scripts/new_script.js")</code></pre>

<p>chrome , firefox , opera </p>

<p><img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAlmAAAAJGZkMjhjMjRlLWM0ZGItNDQ3ZS04ZDViLTkyMjlmYmJkNDM0NQ.png"><img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAgoAAAAJDExNDYxY2NjLWZjZmQtNDQzMy04ZjI4LWMxODUwNTllMzVlNA.png"><img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAfvAAAAJDMxMDZlZTNiLTA1MDItNDQ0ZS04OTA5LTVmNTk1YmNmMTEyNg.png"></p>
<p>Ctrl+S</p>

<p>Use from menu <strong>Run</strong>-&gt;Choose browser for testing. Important: Safari not working at the moment</p>

<p>Chrome, Firefox, Opera</p>

<h3 id="Tutorial_-_Pencil_(Animation_path)"><em><strong>Tutorial - Pencil (Animation path) : </strong></em></h3>

<p>How to use <strong>Pencil tool</strong> to create PATH object . Path object can be saved intro localhost , you can collect object and put it direct source code .</p>
<p>How to use <strong>Pencil tool</strong> to create PATH object. Path object can be saved intro localhost, you can collect object and put it direct source code.</p>

<p>File location : starter/templates/paths.js Templates are made from visual-js core also . See source code : <a href="https://bitbucket.org/nikola_l/visual-js/src/93027dcab76972c6a6432431e1a3341c0e231d61/project/program_instance/starter/templates/paths.js?at=master&amp;fileviewer=file-view-default">paths.js</a> </p>
<p>File location: starter/templates/paths.js Templates are made from visual-js core also. See source code: <a href="https://bitbucket.org/nikola_l/visual-js/src/93027dcab76972c6a6432431e1a3341c0e231d61/project/program_instance/starter/templates/paths.js?at=master&amp;fileviewer=file-view-default">paths.js</a> </p>

<p>{{EmbedYouTube("Y-B-PA5U6KQ")}}</p>

<p class="codepen">See the Pen <a href="https://codepen.io/zlatnaspirala/pen/jrzNko/">Visual js - Pencil </a> by VisualJS game engine (<a href="https://codepen.io/zlatnaspirala">@zlatnaspirala</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><strong>Online demo examples at :</strong></p>
<p><strong>Online demo examples at:</strong></p>

<p><a href="/en-US/docs/">https://jsfiddle.net/user/zlatnaspirala/fiddles/</a></p>

<p><strong>Demo slot machine</strong> basic demo at : </p>
<p><strong>Demo slot machine</strong> basic demo at:</p>

<p><a href="https://jsfiddle.net/zlatnaspirala/7d0d8v6d/" rel="nofollow noopener">https://jsfiddle.net/zlatnaspirala/7d0d8v6d/</a></p>


<h3 id="Help_about_new_2d_part_-_implementation_of_matter.js_based_typescript_.">Help about new 2d part - implementation of matter.js based typescript .</h3>
<h3 id="Help_about_new_2d_part_-_implementation_of_matter.js_based_typescript_.">Help about new 2d part - implementation of matter.js based typescript.</h3>


<p>I make strong relation with webpack and project . build folder is full vendor nature. Html css and resources come from dependency logic taken from source.</p>
<p>I make strong relation with webpack and project. Build folder is full vendor nature. Html css and resources come from dependency logic taken from source.</p>

<p>To make all dependency works in build process we need some plugins.</p>

<p><strong>Features :</strong></p>
<p><strong>Features:</strong></p>

<p>Tile's background draw for images (alias sprite - but for now there's no sprite and frame by frame animation methods).</p>

<p>Small engine config .</p>
<p>Small engine config.</p>

<p>Some option in aspect view like </p>

<p><code>npm install<br>
...</code></p>
...</code></p>

<p><code>npm install typescript<br>
npm i clean-webpack-plugin --save-dev<br>
npm i html-webpack-plugin --save-dev</code></p>

<p><code>Possible fix : </code></p>
<p><code>Possible fix:</code></p>

<p><code>npm i webpack --save-dev<br>
npm i extract-text-webpack-plugin --save-dev<br>
<br>
Fix code format : </code></p>
Fix code format:</code></p>

<p><code>tslint -c tslint.json 'src/**/*.ts' --fix</code></p>



<p><strong>Download project link : </strong></p>
<p><strong>Download project link:</strong></p>

<p><a href="http://bitbucket.org/nikola_l/visual-js" rel="nofollow noopener">Download link from BitBucket.</a></p>

0 comments on commit 5d08394

Please sign in to comment.