Skip to content

Commit

Permalink
updated coordinate system docs. removed old answers from faq.
Browse files Browse the repository at this point in the history
  • Loading branch information
@petteramland
petteramland committed Aug 30, 2023
1 parent b89a09a commit 31c7f45
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 118 deletions.
87 changes: 49 additions & 38 deletions docs/coordinate_system.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<head>
<link rel="stylesheet" href="sswg.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<left>
Expand Down Expand Up @@ -72,9 +71,10 @@
Coordinate System<br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
<h2><div id="Entity Coordinate System"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="Entity Coordinate System"/><br>
Entity Coordinate System<br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
<div class="code_block" style="margin-left: 0em;">
y (up)
Expand All @@ -89,42 +89,52 @@ <h2><div id="Entity Coordinate System"/><br>
<br>
<br>
<br>
<h2><div id="UI Coordinate System"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="UI Coordinate System"/><br>
UI Coordinate System<br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
<div class="code_block" style="margin-left: 0em;">
_______________________(.<yellow>5</yellow>, .<yellow>5</yellow>)____(window.top_right)
| <green>' '</green> |
| <green>' '</green> |
| <green>' '</green> |
| <green>' '</green> |
| <green>' (<yellow>0</yellow>, <yellow>0</yellow>) '</green> |(.<yellow>5</yellow>*window.aspect_ratio, <yellow>0</yellow>)
| <green>' '</green> |
| <green>' '</green> |
| <green>' '</green> |
|_______<green>'__________________'</green>_______|
(-.<yellow>5</yellow>, -.<yellow>5</yellow>)

<div class="code_block" style="margin-left: 0em;"> (-.<yellow>5</yellow>, .<yellow>5</yellow>) (.<yellow>5</yellow>, .<yellow>5</yellow>)
(window.top_right)_______|__(window.top)____|_______(window.top_right)
| <green>' '</green> |
| <green>' '</green> |
| <green>' '</green> |
| <green>' '</green> |
(window.left) <green>' (<yellow>0</yellow>, <yellow>0</yellow>) '</green> (window.right or Vec2(.<yellow>5</yellow>*window.aspect_ratio, <yellow>0</yellow>))
| <green>' '</green> |
| <green>' '</green> |
| <green>' '</green> |
|_______<green>'__________________'</green>_______|
(window.bottom_left) | (window.bottom) | (window.bottom_right)
(-.<yellow>5</yellow>, -.<yellow>5</yellow>) (.<yellow>5</yellow>, -.<yellow>5</yellow>)
</div><br>
Want a different UI coordinate system? No problem. camera.ui is an Entity as well so you can move and scale it as you see fit.<br>
<br>
<br>
<h2><div id="Rotation"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="Rotation"/><br>
Rotation<br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
Positive rotation means rotating clockwise around the axis, looking from the outside in.<br>
The exception to this is the z-axis, which is counter-clockwise.<br>
While this is inconsistent, it makes setting rotation_z in 2D also clockwise.<br>
<br>
Positive value is clock-wise around axis.<br>
Imagine looking from a positive point on the axis and turing the entity left.<br>
Although generally not recommended, the rotation direction can be changed by<br>
setting <span>Entity.rotation_directions</span> (default: (-1,-1,1)).<br>
<br>
In general when working with rotation you'll want to only set one of the axes at the same time.<br>
For more complicated rotations you can use <span>entity.look_at(position)</span>, <span>entity.look_at_2d(position)</span><br>
or even set/get .quaternion if you're comfortable with that. For continuous rotation, <span>entity.rotate(amount)</span> can be good as it will add a rotation to the current rotation.<br>
<br>
<div class="code_block" style="margin-left: 0em;">
_______
/
\-&gt;
__
/ \ y
| v |
| z | __
v | |
| z | __
\ | / \
\| v |
*---------- x |
Expand All @@ -133,26 +143,27 @@ <h2><div id="Rotation"/><br>
<br>
<br>
<br>
<h2><div id="Origin"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="Origin"/><br>
Origin<br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
Setting the origin will move the origin point of the model.<br>
This can be especially useful when working with the UI.<br>
<br>
<div class="code_block" style="margin-left: 0em;"> (-.<yellow>5</yellow>,.<yellow>5</yellow>)
+--------+ *--------+
| | | |
| (<yellow>0</yellow>,<yellow>0</yellow>) | | |
| | | |
+--------+ +--------+
<div class="code_block" style="margin-left: 0em;"> (-.<yellow>5</yellow>,.<yellow>5</yellow>)
+---------+ <yellow>0</yellow>---------+
| (<yellow>0</yellow>,<yellow>0</yellow>) | | |
| <yellow>0</yellow> | | |
| | | |
+---------+ +---------+

(<yellow>0</yellow>,.<yellow>5</yellow>)
+----*---+ +--------+
| | | |
| | | * (.<yellow>5</yellow>,<yellow>0</yellow>)
| | | |
+--------+ +--------+
(<yellow>0</yellow>,.<yellow>5</yellow>)
+----<yellow>0</yellow>----+ +---------+
| | | |
| | | <yellow>0</yellow> (.<yellow>5</yellow>,<yellow>0</yellow>)
| | | |
+---------+ +---------+

</div><br>

Expand Down
68 changes: 38 additions & 30 deletions docs/coordinate_system.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,28 +24,36 @@
## UI Coordinate System

```

_______________________(.5, .5)____(window.top_right)
| ' ' |
| ' ' |
| ' ' |
| ' ' |
| ' (0, 0) ' |(.5*window.aspect_ratio, 0)
| ' ' |
| ' ' |
| ' ' |
|_______'__________________'_______|
(-.5, -.5)

(-.5, .5) (.5, .5)
(window.top_right)_______|__(window.top)____|_______(window.top_right)
| ' ' |
| ' ' |
| ' ' |
| ' ' |
(window.left) ' (0, 0) ' (window.right or Vec2(.5*window.aspect_ratio, 0))
| ' ' |
| ' ' |
| ' ' |
|_______'__________________'_______|
(window.bottom_left) | (window.bottom) | (window.bottom_right)
(-.5, -.5) (.5, -.5)
```

Want a different UI coordinate system? No problem. camera.ui is an Entity as well so you can move and scale it as you see fit.


## Rotation

Positive value is clock-wise around axis.
Imagine looking from a positive point on the axis and turing the entity left.
Positive rotation means rotating clockwise around the axis, looking from the outside in.
The exception to this is the z-axis, which is counter-clockwise.
While this is inconsistent, it makes setting rotation_z in 2D also clockwise.

Although generally not recommended, the rotation direction can be changed by
setting `Entity.rotation_directions` (default: (-1,-1,1)).

In general when working with rotation you'll want to only set one of the axes at the same time.
For more complicated rotations you can use `entity.look_at(position)`, `entity.look_at_2d(position)`
or even set/get .quaternion if you're comfortable with that. For continuous rotation, `entity.rotate(amount)` can be good as it will add a rotation to the current rotation.

```

Expand All @@ -54,8 +62,8 @@ Imagine looking from a positive point on the axis and turing the entity left.
\->
__
/ \ y
| v |
| z | __
v | |
| z | __
\ | / \
\| v |
*---------- x |
Expand All @@ -71,18 +79,18 @@ Setting the origin will move the origin point of the model.
This can be especially useful when working with the UI.

```
(-.5,.5)
+--------+ *--------+
| | | |
| (0,0) | | |
| | | |
+--------+ +--------+

(0,.5)
+----*---+ +--------+
| | | |
| | | * (.5,0)
| | | |
+--------+ +--------+
(-.5,.5)
+---------+ 0---------+
| (0,0) | | |
| 0 | | |
| | | |
+---------+ +---------+

(0,.5)
+----0----+ +---------+
| | | |
| | | 0 (.5,0)
| | | |
+---------+ +---------+

```
45 changes: 15 additions & 30 deletions docs/faq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<head>
<link rel="stylesheet" href="sswg.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<left>
Expand Down Expand Up @@ -72,16 +71,11 @@
Frequently Asked Questions<br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
<h2><div id="How do I update ursina?"/><br>
How do I update ursina?<br>
</h2><br>
<br>
<div class="code_block" style="margin-left: 0em;">pip install <a href="https://github.com/pokepetter/ursina/archive/master.zip">https://github.com/pokepetter/ursina/archive/master.zip</a> --upgrade
</div><br>
<br>
<h2><div id="How should I structure my project?"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="How should I structure my project?"/><br>
How should I structure my project?<br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
<div class="code_block" style="margin-left: 0em;">project_folder/ <gray># create a new folder <purple>for</purple> each project</gray>
enemies.py
Expand All @@ -96,9 +90,10 @@ <h2><div id="How should I structure my project?"/><br>
<br>
<br>
<br>
<h2><div id="How do I move the camera?"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="How do I move the camera?"/><br>
How do I move the camera?<br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
The camera is an Entity, so you can move and rotate it just like everything else:<br>
&nbsp;&nbsp;&nbsp;&nbsp;```<br>
Expand All @@ -107,9 +102,10 @@ <h2><div id="How do I move the camera?"/><br>
<br>
<br>
<br>
<h2><div id="Why should I use Python for game development. Isn't it slow?"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="Why should I use Python for game development. Isn't it slow?"/><br>
Why should I use Python for game development. Isn't it slow?<br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
Not really. The most performance critical part are written in C++ or shader code.<br>
Python can make you more productive as a developer and thus make it easier<br>
Expand All @@ -118,30 +114,19 @@ <h2><div id="Why should I use Python for game development. Isn't it slow?"/><br>
<br>
<br>
<br>
<h2><div id="How do I call a function with a delay?</b>"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="How do I call a function with a delay?</b>"/><br>
How do I call a function with a delay?</b><br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
<div class="code_block" style="margin-left: 0em;">invoke(some_function, arg<yellow>1</yellow>, kwarg<yellow>1</yellow>=<green>'some kwarg'</green>, dela<olive>y</olive>=<yellow>2</yellow>)
</div><br>
<br>
<br>
<h2><div id="How do I add lights?"/><br>
How do I add lights?<br>
</h2><br>
<br>
If all you want are some simple lights to make 3D shapes look more interesting,<br>
look at the program 'lights.py' in the samples folder.&nbsp;&nbsp;For anything more complicated,<br>
you are on your own. The DirectionalLight has shadows too, but it's recommended to use the<br>
lit_with_shadows_shader on entities. The shadow area will be calculated based on the scene bounds,<br>
so keep that in mind when isinstanciation the light.<br>
<br>
<br>
<br>
<br>
<h2><div id="How can I use panda3d alongside ursina?"/><br>
<div style="font-size: 40.0px;font-weight: bold;">
<div id="How can I use panda3d alongside ursina?"/><br>
How can I use panda3d alongside ursina?<br>
</h2><br>
<div style="font-size: 20.0px;font-weight: normal;">
<br>
What you need to know is that Entity is a NodePath and Ursina is a ShowBase.<br>
You can also write custom shaders, see panda3d's shader documentation for that.<br>
Expand Down
17 changes: 0 additions & 17 deletions docs/faq.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,6 @@

### Frequently Asked Questions

## How do I update ursina?

```
pip install https://github.com/pokepetter/ursina/archive/master.zip --upgrade
```


## How should I structure my project?

Expand Down Expand Up @@ -54,17 +48,6 @@ invoke(some_function, arg1, kwarg1='some kwarg', delay=2)



## How do I add lights?

If all you want are some simple lights to make 3D shapes look more interesting,
look at the program 'lights.py' in the samples folder. For anything more complicated,
you are on your own. The DirectionalLight has shadows too, but it's recommended to use the
lit_with_shadows_shader on entities. The shadow area will be calculated based on the scene bounds,
so keep that in mind when isinstanciation the light.




## How can I use panda3d alongside ursina?

What you need to know is that Entity is a NodePath and Ursina is a ShowBase.
Expand Down
13 changes: 10 additions & 3 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

--code_block_bg_color: #efefef;
--code_block_text_color: hsl(240, 0%, 20%);
--inline_code_bg_color: hsl(300, 35%, 81%);

/*blue/orange */
--gradient_start: #00a9d3;
Expand Down Expand Up @@ -40,6 +41,8 @@

--code_block_bg_color: hsl(60, 0%, 10%);
--code_block_text_color: hsl(240, 0%, 80%);
--inline_code_bg_color: hsl(302, 30%, 15%);

--olive: #b29527;
--green: #39a468;
--blue: hsl(210deg 68% 58%);
Expand Down Expand Up @@ -143,10 +146,14 @@ purple {color: var(--purple)}
}

span {
background-color: var(--bg_color);
padding: .1em;
background-color: var(--inline_code_bg_color);
padding-left: .25em;
padding-right: .25em;
line-height: 1.35em;
color: var(--text_color);
color: var(--code_block_text_color);
font-family: monospace;
font-size: .9em;
border-radius: .5em;
}

/* ===== Scrollbar CSS ===== */
Expand Down

0 comments on commit 31c7f45

Please sign in to comment.