Skip to content

Commit 73348a7

Browse files
MKothMKoth
committed
Added changes to readme with description of API and graphic replacement, also some work on plantSavior importing to new API is saved
1 parent 840efaf commit 73348a7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+2739
-0
lines changed

‎README.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,3 +171,96 @@ ALSET Games based on React Game Kit
171171
<li>The score increasing when item sold to clients, the more items are sold, the more score is collected</li>
172172
<li>Challenge is to distribute clients evenly and repair kiosks in time, choosing those first, where the line is longer</li>
173173
</ol>
174+
175+
176+
<h1 align="center">Explanation of how to work with API 2.0 when writing your function</h1>
177+
<p>Each function is running each iteration of game, receiving world object that contain following information:</p>
178+
<pre>
179+
{
180+
player:{x:10, y:15},
181+
collectives:[],
182+
direction: "left"||{left:true},
183+
index:0,
184+
config: config,
185+
gameId: 0,
186+
controlInfo: {keyPressed:["up", "down"], current:[0,1]}
187+
}
188+
</pre>
189+
<p>From this object we can get following information:</p>
190+
<ol>
191+
<li>
192+
player - containing information about bot's position, for some games, like in passengerPickup game, it can contain some additional information, like 'path', to determine is path already calculated for this car or it nned to be calculated(you, of course can calculate path each iteration, but it will consume addittional resources) and 'passenger' to find if car is already loaded with passenger or is empty and need to get some
193+
</li>
194+
<li>
195+
collectives - is an array containing objects, each object containing information about position and some additional information if needed (like health and state parameter for plants). Depending on game collectives can be called differently, for example in passengerPickup game it can be called passengers
196+
</li>
197+
<li>
198+
direction - is information about direction bot is moving now, there are two formats: {left:true}, "left"
199+
</li>
200+
<li>
201+
index - is number of character can be 0 or 1 for 1st and 2nd character accordingly
202+
</li>
203+
<li>
204+
config - is game's config.json you can find it in game's root folder ./simulation folder, it will help you to find width, height of collectives and player etc.
205+
</li>
206+
<li>
207+
gameId identifies which game is bot controlled for, left screen has 0 gameId, right - 1.
208+
</li>
209+
<li>
210+
control info is used if you want to control bot with keys it contain of 1st array "keyPressed" that has two elements: first is for left screen controlled bot, second is for right screen, and second array that also, consists of two elements, each element can be 0 or 1, depending on which bot out of two is controllde now, since there can be two bots on each screen. This parameter is changing when user clicks switch button. Left, right, up, down and switch keys names can be found and changed in config.json file for each game
211+
</li>
212+
</ol>
213+
214+
<h1 align="center">Explanation of how to change graphic if needed</h1>
215+
<h2 align="center">What sprite should look like</h2>
216+
<p>
217+
Sprite shape should be following:<br> from top to bottom (vertically) there is a state (left, right, up,down moving, running, idle, etc.)<br>
218+
From left to right (horizontally) should be frames for those states<br>
219+
For example:<br>
220+
<img width="530" src="https://raw.githubusercontent.com/MKoth/games/master/screens/gnome1.png">
221+
Example with just 1 frame (horizontal line) for each state:
222+
<img width="530" src="https://raw.githubusercontent.com/MKoth/games/master/screens/drone1.png">
223+
</p>
224+
<h2 align="center">Steps to insert new sprite into game</h2>
225+
<ol>
226+
<li>
227+
Save sprite to ./src/assets/sprites folder in the root of chosen game
228+
</li>
229+
<li>
230+
In ./view/Components/Characters/ copy any of files present there and rename it to name like, for example<br>
231+
import img from '../../../assets/sprites/gnome1.png';<br>
232+
would be changed to:<br>
233+
import img from '../../../assets/sprites/your_custom_name.png';<br>
234+
this file should be already present in assets folder
235+
</li>
236+
<li>
237+
In getAnimationState() switch case should be changed to yours, here are direction present and which direction which state is correspondant to(remember - state is horisontal line of frames, for ex. if up movement is 3rd horisontal line, then<br>
238+
case 'up': this.animState = 2;)
239+
</li>
240+
<li>
241+
In render you can see Sprite componenet, most important parameters are:<br>
242+
tileWidth, tileHeight, those indicating original size of each frame, in scale parameter you can see this.props.scale, it's used there to adapt size of sprite depending on scale of the game window in the browser.<br>
243+
Last important parameter is steps, elements in array are coresponding to the states(horizontal lines) in the sprite. For example, in gnome sprite that was given as an example, 1st horizontal line consists of 8 elements, as well as 2nd, 3rd and 4th, 5th and 6th lines or states consists from 1 frame, so steps parameter would look like [7, 7, 7, 7, 0, 0], since counting starts from 0.
244+
</li>
245+
<li>
246+
In './src/view/character.js' you need to import your sprite here and add new case for your custom sprite
247+
</li>
248+
<li>
249+
In './src/view/App.js' just need to replace type of any Character component to the one you've added to cases
250+
</li>
251+
</ol>
252+
<h2 align="center">What tile should look like</h2>
253+
<p>
254+
Tile is any square image that can be repeated all over map, for example:<br>
255+
<img width="530" src="https://raw.githubusercontent.com/MKoth/games/master/screens/city-tile.png">
256+
<img width="530" src="https://raw.githubusercontent.com/MKoth/games/master/screens/grass.jpg">
257+
</p>
258+
<p>
259+
To change tile image you just need to save it into ./src/assets/tiles and in ./src/view/tile.js change import img from '../assets/tiles/your_custom_image.png'
260+
</p>
261+
<p>
262+
Same steps can be applied to collective creating, save collective image to ./src/assets/collective and replace import in collectives.js
263+
</p>
264+
<p>
265+
Some folder and file naming can differ depending on game, for example, collective folder and file in plantSavior game calling plant.js
266+
</p>

‎screens/city-tile.png

1.32 MB
Loading

‎screens/drone1.png

127 KB
Loading

‎screens/gnome1.png

93.1 KB
Loading

‎screens/grass.jpg

260 KB
Loading

‎src/plantSavior/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "alsetames",
3+
"version": "0.1.0",
4+
"private": true,
5+
"main": "index.js",
6+
"dependencies": {
7+
"react": "^16.3.2",
8+
"react-ace": "^5.9.0",
9+
"react-dom": "^16.3.2",
10+
"react-game-kit": "1.0.6",
11+
"react-scripts": "1.1.4",
12+
"mobx": "^4.2.1",
13+
"mobx-react": "^5.1.2"
14+
},
15+
"scripts": {
16+
"start": "react-scripts start",
17+
"build": "react-scripts build",
18+
"test": "react-scripts test --env=jsdom",
19+
"eject": "react-scripts eject"
20+
}
21+
}

‎src/plantSavior/public/favicon.ico

3.78 KB
Binary file not shown.

‎src/plantSavior/public/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.6.2/brython.js"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.6.2/brython_stdlib.js"></script>
24+
<script type="text/python3" src="./myEditor.py"></script>
25+
<title>React App</title>
26+
</head>
27+
<body>
28+
<noscript>
29+
You need to enable JavaScript to run this app.
30+
</noscript>
31+
<div id="simulation"></div>
32+
<div id="root"></div>
33+
<!--
34+
This HTML file is a template.
35+
If you open it directly in the browser, you will see an empty page.
36+
37+
You can add webfonts, meta tags, or analytics to this file.
38+
The build step will place the bundled scripts into the <body> tag.
39+
40+
To begin the development, run `npm start` or `yarn start`.
41+
To create a production bundle, use `npm run build` or `yarn build`.
42+
-->
43+
<script type="text/javascript">
44+
window.onload = ()=> { brython({ debug: 1 }) }
45+
</script>
46+
</body>
47+
</html>

‎src/plantSavior/public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎src/plantSavior/public/myEditor.py

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import sys
2+
import time
3+
import traceback
4+
import javascript
5+
6+
from browser import document as doc, window, alert
7+
8+
from browser import document, alert, console
9+
10+
def createFunctionFromPython(string):
11+
try:
12+
exec(string+"""
13+
window.getPlayersCommands = getPlayersCommands""")
14+
except Exception as e:
15+
alert(e)
16+
return 1
17+
else:
18+
return 0
19+
window.createFunctionFromPython=createFunctionFromPython;

0 commit comments

Comments
 (0)