Skip to content

Commit 0ad3493

Browse files
JeremyGamer13JeremyGamer13
committed
update main docs
1 parent 9165f84 commit 0ad3493

23 files changed

+239
-95
lines changed

‎docs/blocks.md

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎docs/codeeditor.md

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
title: Understanding the Code Editor
3+
sidebar_position: 4
4+
---
5+
6+
# Understanding the Code Editor
7+
8+
The code editor has lots of individual parts that can be named, seen below:
9+
<img src="/img/docimages/studio-diagram.png" alt="Diagram of the Studio"></img>
10+
11+
## The Toolbox
12+
The Toolbox is the menu on the left that allows you to place individual blocks onto the Workspace in the center.
13+
<img src="/img/docimages/toolbox.png" alt="Image of the toolbox" height="640"></img>
14+
15+
Click and drag a block from the Toolbox, then release the mouse on the Workspace to place a block there.
16+
17+
### Categories
18+
Categories are individual sections of the toolbox that contain groups of blocks.
19+
<img src="/img/docimages/categories.png" alt="Categories in the toolbox" height="320"></img>
20+
21+
Each category has blocks related to the name of the category:
22+
- **Motion:** Blocks related to moving & rotating the Sprite
23+
- **Looks:** Blocks related to the visual look & style of the Sprite or parts of it
24+
- **Sound:** Blocks related to playing or modifying sounds
25+
- **Events:** Blocks that run when certain things happen in the project, or run other events
26+
- **Control:** Logical blocks that allow you to control how a block stack runs or ends
27+
- **Sensing:** Blocks related to sensing things on the screen, things about sprites, or sensing devices on the computer
28+
- **Operators:** Blocks related to mathematical operations, modifying text, mechanical operations, etc
29+
30+
We'll return to Variables, Lists, and My Blocks later.
31+
32+
### Extensions
33+
Extensions are various new categories you can import in your project if your project needs them.
34+
<img src="/img/docimages/extension-list.png" alt="Extension list in PenguinMod Studio"></img>
35+
36+
Most simple projects will not require the use of any extensions, but extensions allow for additional functionality in your projects.
37+
38+
You can access this menu by clicking the button with the blocks and a plus at the bottom of the toolbox.
39+
<img src="/img/docimages/extensions-list-button.png" alt="Extension list button in PenguinMod Studio"></img>
40+
41+
Clicking the category filters on the left will allow you to filter out extensions that you aren't looking for.
42+
<img src="/img/docimages/extension-list-filters.png" alt="Extension list filters in PenguinMod Studio"></img>
43+
44+
### Monitors
45+
Click the checkbox next to certain blocks in the toolbox to show a monitor for it.
46+
<img src="/img/docimages/monitorsexample.png" alt="Monitors in the toolbox"></img>
47+
48+
A monitor will appear on the stage, which shows the value of the block that has it's monitor enabled.
49+
<img src="/img/docimages/monitorsexample2.png" alt="Monitors in the stage"></img>
50+
51+
You can right-click on a monitor to change it's look or hide the monitor again.
52+
<img src="/img/docimages/monitorsexampleoption.png" alt="Monitors in the stage"></img>
53+
54+
Dragging a monitor will also move it around on the stage.
55+
56+
## The Workspace
57+
The workspace is where you will place blocks in your project to make things happen in the project.
58+
<img src="/img/docimages/workspace.png" alt="Image of the workspace" height="320"></img>
59+
60+
Drag a block from the Toolbox onto the Workspace to add blocks.
61+
62+
You can drag the block around the Workspace to move it, or drag it back onto the Toolbox to delete it.
63+
64+
Connecting blocks on the top or bottom of another block will create Block Stacks, and spots to place blocks inside of other blocks can be known as Inputs, or Arguments.
65+
66+
**Note: Block Stacks are commonly referred to as Scripts.**
67+
68+
### Shortcuts
69+
View the list of editor shortcuts [here.](/shortcuts#editor)
70+
71+
### Right-click menu
72+
Right-clicking on an empty part of the workspace will open this menu:
73+
<img src="/img/docimages/contextmenu.png" alt="Right-click menu on the workspace"></img>
74+
75+
You might see different options if you have other blocks on the workspace, custom extensions, or addons.
76+
77+
Right-clicking on a block will show different menus based on what the block is, and what addons you have enabled.
78+
<img src="/img/docimages/right-click-block.png" alt="Right click block"></img>
79+
80+
Right-clicking certain blocks with the **Block switching** Editor Addon (enabled by default) will show options to switch it with another block:
81+
<img src="/img/docimages/right-click-switch.png" alt="Right click switch"></img>
82+
83+
### Comments
84+
Adding comments on the Workspace or other blocks will create a small note where you can type any information you want.
85+
<img src="/img/docimages/comment.png" alt="Workspace comment"></img>
86+
87+
- Clicking the arrow on the top of a comment will minimize the comment
88+
- Clicking the X icon on the top of a comment will delete the comment
89+
- Dragging the dashed lines at the bottom right of a comment will resize the comment
90+
- Dragging the top bar of a comment will move the comment around on the workspace
91+
92+
## The Stage
93+
The stage is the area where sprites and backgrounds will appear in the project.
94+
<img src="/img/docimages/stage.png" alt="Editor stage"></img>
95+
96+
Drag a sprite on the screen to move it somewhere else. (Enable the **Non-draggable sprites in editor** addon to change this behavior.)
97+
98+
- Clicking the Blue Flag acts like starting the project, resetting Sprite effects,
99+
resetting clones and activating <img src="/img/docimages/blocktype_event.png" alt="when flag clicked" height="48"></img> event blocks
100+
- Clicking the Pause icon will pause all blocks and sounds in the project
101+
- Clicking the Stop icon will stop the project, resetting Sprite effects,
102+
deleting clones and activating <img src="/img/docimages/stop_event.png" alt="when stop clicked" height="48"></img> event blocks
103+
104+
You can click the outwards-pointing arrows button to enter a fullscreen mode,
105+
or click the buttons next to it to scale down the stage in the editor if it takes up too much space.
106+
107+
### Selecting the stage sprite
108+
Next to the Sprite list, the Stage is selectable on the right side.
109+
110+
Selecting the stage will disable certain categories if the stage cannot use any blocks from them:
111+
<img src="/img/docimages/stage-disabled-category.png" alt="Stage disabled category"></img>
112+
113+
The Stage also replaces **Costumes** with **Backdrops**, acting as a background to the project.
114+
115+
## The Sprite List
116+
The Sprite List is a grid list of the sprites inside the project.
117+
<img src="/img/docimages/sprite-list.png" alt="Sprite List"></img>
118+
119+
Hovering over the blue button in the bottom right will allow you to import or draw a sprite.
120+
121+
### What actually is a Sprite?
122+
A Sprite is an object that has Costumes to determine how it looks, has Block Code to determine what it does, and has Sounds to determine the noises it can make.
123+
<img src="/img/docimages/sprite-diagram.png" alt="Sprite diagram"></img>
124+
125+
Block code can switch to different sprite costumes, move the sprite around, resize the sprite, play sprite sounds, etc.
126+
127+
## The Backpack
128+
The Backpack is a menu at the bottom of the editor where you can store Sprites, Costumes, Sounds, or even Block stacks.
129+
<img src="/img/docimages/backpack.png" alt="Backpack"></img>
130+
131+
Content inside the backpack is accessible for other projects you may create.
132+
133+
:::note
134+
Backpacks in PenguinMod save to your computer. If you switch browsers or clear your browsing data, you may lose your backpack.
135+
:::
136+
137+
:::warning
138+
As of now, including a Custom Extension in Code or Sprites inside your backpack may cause unexpected behavior.
139+
Try loading extensions inside the code or sprites before trying to import the content from your backpack.
140+
:::
141+
142+
## Restore Points
143+
Restore Points are an auto-saving feature in PenguinMod in the case you forgot to save your project.
144+
:::danger
145+
Do not rely on Restore Points for saving as they may be randomly deleted by your computer or browser.
146+
If you switch browsers or clear your browsing data, you may lose any restore points you had.
147+
148+
You can save your projects to a file by clicking "Save to your computer" in the top right when you make changes.
149+
:::
150+
151+
<img src="/img/docimages/restore-points.png" alt="Restore Points menu"></img>
152+
153+
You can change the auto-save period between when Restore Points are created in this menu, or delete all existing Restore Points.
154+
155+
Clicking on a Restore Point will confirm if you'd like to load the project from that Restore Point.
156+
157+
It is recommended to configure this auto-save period to your liking depending on how long you spend in the editor, how often you save, and how often you load other projects.

‎docs/modules.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Parts of PenguinMod
3+
sidebar_position: 3
4+
---
5+
6+
# Parts of PenguinMod
7+
These are individual parts of PenguinMod that make up a section of one of PenguinMod's sites.
8+
9+
## The Stage
10+
<img src="/img/docimages/stage.png" alt="Website Screenshot" height="320"></img>
11+
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
12+
13+
This is where sprites will appear in your project. Moving, rotating, resizing, or editing a sprite in any visual way will be seen on the stage.
14+
15+
The stage itself can also have backdrop costumes, serving as backgrounds to the project.
16+
17+
## Code Editor
18+
<img src="/img/docimages/code-editor.png" alt="Website Screenshot" height="320"></img>
19+
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
20+
21+
This is where you'll place blocks that do things in the project.
22+
23+
Connecting blocks on the top or bottom of another block will create Block Stacks, and spots to place blocks inside of other blocks can be known as Inputs, or Arguments.
24+
25+
Find more info about the code editor [here.](/blocks)
26+
27+
## Paint Editor
28+
<img src="/img/docimages/costume-editor.png" alt="Website Screenshot" height="320"></img>
29+
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
30+
31+
Commonly referred to as the Costume editor, this section of the PenguinMod Studio allows you to draw and edit costumes in your PenguinMod projects.
32+
33+
You can use Vector mode to draw costumes that look clean at any zoom level, or Bitmap mode to draw with pixels.
34+
35+
## Sound Editor
36+
<img src="/img/docimages/sound-editor.png" alt="Website Screenshot" height="320"></img>
37+
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
38+
39+
This section of the PenguinMod studio allows you to edit, import, or record sounds for your project.
40+
41+
Each button seen below the sound visualizer will allow you to modify the sound in some way.

‎docs/pages.md

Lines changed: 8 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
---
2-
title: Parts of PenguinMod
2+
title: Websites in PenguinMod
33
sidebar_position: 2
44
---
55

6-
# Parts of PenguinMod
7-
There are several websites and modules used in PenguinMod, so let's cover them.
6+
# Websites in PenguinMod
7+
There are several individual websites used in PenguinMod, so let's cover them.
88

9-
## Websites
10-
These are individual websites you can find that are important to PenguinMod.
11-
12-
### Home page
9+
## Home page
1310
<img src="/img/docimages/penguinmod.png" alt="Website Screenshot" height="320"></img>
1411
*Found on [https://penguinmod.com/](https://penguinmod.com/).*
1512

1613
This contains community projects uploaded by people who use PenguinMod.
1714

1815
You can sign in using an existing Scratch account, without having to type your password into PenguinMod.
1916

20-
### Studio page
17+
## Studio page
2118
<img src="/img/docimages/studio.png" alt="Website Screenshot" height="320"></img>
2219
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
2320

@@ -27,57 +24,20 @@ You can upload or save your creations to a file at the top of the page.
2724

2825
This is also where you play other people's projects uploaded on PenguinMod.
2926

30-
### Extensions Gallery
27+
## Extensions Gallery
3128
<img src="/img/docimages/extensions-gallery.png" alt="Website Screenshot" height="320"></img>
3229
*Found on [https://extensions.penguinmod.com/](https://extensions.penguinmod.com/).*
3330

3431
This site helps you find [Custom Extensions](/development/extensions/) created by the community.
3532

3633
These custom extensions can be copied and used in your projects to expand the amount of things you can do in the PenguinMod editor.
3734

38-
### Packager
35+
## Packager
3936
<img src="/img/docimages/packager.png" alt="Website Screenshot" height="320"></img>
4037
*Found on [https://studio.penguinmod.com/PenguinMod-Packager/](https://studio.penguinmod.com/PenguinMod-Packager/).*
4138

4239
:::note
4340
This site is easier to understand if you know some info about creating executable programs or web development.
4441
:::
4542

46-
This is where you can turn your PenguinMod projects into executable programs for Windows, MacOS and Linux, ZIP archives, or web pages that you can host online.
47-
48-
## Modules
49-
These are individual parts of PenguinMod that make up a section of one of PenguinMod's sites.
50-
51-
### The Stage
52-
<img src="/img/docimages/stage.png" alt="Website Screenshot" height="320"></img>
53-
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
54-
55-
This is where sprites will appear in your project. Moving, rotating, resizing, or editing a sprite in any visual way will be seen on the stage.
56-
57-
The stage itself can also have backdrop costumes, serving as backgrounds to the project.
58-
59-
### Code Editor
60-
<img src="/img/docimages/code-editor.png" alt="Website Screenshot" height="320"></img>
61-
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
62-
63-
This is where you'll place blocks that do things in the project.
64-
65-
Connecting blocks on the top or bottom of another block will create Block Stacks, and spots to place blocks inside of other blocks can be known as Inputs, or Arguments.
66-
67-
Find more info about the code editor [here.](/blocks)
68-
69-
### Paint Editor
70-
<img src="/img/docimages/costume-editor.png" alt="Website Screenshot" height="320"></img>
71-
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
72-
73-
Commonly referred to as the Costume editor, this section of the PenguinMod Studio allows you to draw and edit costumes in your PenguinMod projects.
74-
75-
You can use Vector mode to draw costumes that look clean at any zoom level, or Bitmap mode to draw with pixels.
76-
77-
### Sound Editor
78-
<img src="/img/docimages/sound-editor.png" alt="Website Screenshot" height="320"></img>
79-
*Found on [https://studio.penguinmod.com/](https://studio.penguinmod.com/).*
80-
81-
This section of the PenguinMod studio allows you to edit, import, or record sounds for your project.
82-
83-
Each button seen below the sound visualizer will allow you to modify the sound in some way.
43+
This is where you can turn your PenguinMod projects into executable programs for Windows, MacOS and Linux, ZIP archives, or web pages that you can host online.

‎docs/shortcuts.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Editor Shortcuts
3+
sidebar_position: 5
4+
---
5+
6+
# Shortcuts
7+
:::warning
8+
These docs are not completely finished yet. We're slowly working on expanding the documentation while we work on other things, so please be patient with us!
9+
:::
10+
Using the keyboard or mouse, you can do a lot of actions quickly using key and mouse button combinations.
11+
12+
## Editor
13+
With the **Duplicate script with Alt key** Editor Addon (enabled by default):
14+
- Holding `Alt` while dragging a block or block stack will duplicate the block(s).
15+
- Holding `Alt + Ctrl` while dragging a block inside a block stack will duplicate the block that was dragged, instead of the entire stack.
16+
:::note
17+
On macOS, use the Option key instead of the Alt key and Command key instead of the Control key.
18+
:::
19+
20+
With the **Grab single block with Ctrl key** Editor Addon (enabled by default):
21+
- Holding `Ctrl` while dragging a block inside a block stack will pull out individual blocks in the stack, rather than dragging the whole stack.
22+
:::note
23+
On macOS, use the Cmd key instead of the Ctrl key.
24+
If "flip controls" is enabled on this addon in the Addons Menu, actions will swap and holding Ctrl will drag the whole stack instead.
25+
:::
26+
27+
With the **Insert blocks by name** Editor Addon (enabled by default):
28+
- Pressing `Ctrl + Space`, `Shift + Click`, or clicking with the middle mouse button on an empty part of the Workspace will open a menu to search for blocks by name.
29+
<img src="/img/docimages/insert-block-menu.png" alt="Insert block menu"></img>

‎docs/username.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Username Blocks
3-
sidebar_position: 5
3+
sidebar_position: 7
44
---
55

66
# Username Blocks

‎sidebars.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ const sidebars = {
3232
tutorialSidebar: [
3333
'index',
3434
'pages',
35-
'blocks',
35+
'modules',
36+
'codeeditor',
37+
'shortcuts',
3638
'username'
3739
],
3840
customExtensions: [{ type: 'autogenerated', dirName: 'development/extensions' }],

‎static/img/docimages/backpack.PNG

9.3 KB
Loading

‎static/img/docimages/blocktype_event.png

2.22 KB
Loading

‎static/img/docimages/comment.PNG

2.11 KB
Loading

0 commit comments

Comments
 (0)