Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed plenking, removed missing images. #3079

Merged
merged 1 commit into from
Mar 13, 2021
Merged

Fixed plenking, removed missing images. #3079

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 50 additions & 60 deletions files/en-us/games/visual-js_game_engine/index.html
View file
Open in desktop
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:keestu@gmail.com">keestu@gmail.com</a>) GNU General Public License</p>
<p>webgl2 based on: Copyright (C) 2014 Tappali Ekanathan Keestu (<a href="mailto:keestu@gmail.com">keestu@gmail.com</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 nodemailer@0.7.0</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>