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.

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

Remove duplicate images in tutorials #2871

Merged
merged 1 commit into from
May 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Prolog? Why Pygame?
As we know, every kind of game has 3 sections (Because game is a subgroup of program): **input**, **process** and **output**. If you want to make a game in C **console environment** (Write C source code then execute that on the console) simply, all you have to do is just using lots of scanf(or unnormalized getch function) functions and procedural complex algorithm followed by printf(with blinking clear function) functions with ASCII arts! However, when you get bored of making outdated, graphic-less CUI, discontinuous game, now it’s time to learn GUI based game making tool. You can directly enter into Unity **game engine** or Unreal game engine. However, there are too much barrier to overcome. Quaternion for 3D collision, Mechanim/Legacy animation compatibility, Larger memory/Faster CPU for simulate in high-graphic mod, and etc! So, there is a dilemma between console environment and game engine. Can this dilemma to be solved?


.. image:: introduction-PuyoPuyo.png
.. image:: ../../../assets/introduction-PuyoPuyo.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -47,7 +47,7 @@ As we know, every kind of game has 3 sections (Because game is a subgroup of pro
(Example of C console game - PuyoPuyo)


.. image:: introduction-TPS.png
.. image:: ../../../assets/introduction-TPS.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -84,7 +84,7 @@ As we know, every kind of game has 3 sections (Because game is a subgroup of pro
Yes. Pygame can solve that. Pygame is an external library of **Python** which enables you to make a **game**. Pygame has advantages of console environment. For example, single pygame project nearly equals single source code, so we have to focus on writing source code only. (with some sound file or some image file in the same directory). Because Pygame is not a tool but a library, single command “import pygame” makes current source code to use pygame’s everything. That is, Pygame is simple to access. Pygame has advantages of game engine, too. For example, Pygame provide input functions (which check every possible state of keyboard, mouse and even files) and output functions (drawing geometry, fill certain colors or set display) to user. That is, user can run the program on the GUI environment if it based on Pygame. Because Pygame is based on Python, functions in Pygame project can be executed selectively, even almost simultaneously. That is, Pygame is event-driven.


.. image:: introduction-Battleship.png
.. image:: ../../../assets/introduction-Battleship.png
:class: inlined-right

.. code-block:: python
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Basic TEMPLATE and OUTPUT
As I said, Pygame is based on GUI environment. Furthermore, Pygame is good for making 2D game because of its input/output format. So, you have to say good-bye for print or input standard function of Python (Because they work only on CUI environment). Then, what functions in Pygame replace these functions? First, we have to go back to friendly “Hello World!” project, which is learning about basic template and output. **(Requiring any font file(.ttf) in the same project directory)**


.. image:: Basic-ouput-sourcecode.png
.. image:: ../../../assets/Basic-ouput-sourcecode.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -49,7 +49,7 @@ As I said, Pygame is based on GUI environment. Furthermore, Pygame is good for m
pygame.display.flip()


.. image:: Bagic-ouput-result-screen.png
.. image:: ../../../assets/Bagic-ouput-result-screen.png
:class: inlined-right

.. code-block:: python
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Basic PROCESS
Previous project looks like a single image instead of game. Because there is no input neither process to control output. Of course, clicking exit button on window is not counted because it is just shutting down the entire program. First, we will let text “Hello World!” to move automatically (and now project will be looks like an animation rather than single image), which means adding first processing logic on this project. How to move text? We know that location of text is initialized in Initial statement. So, location of text should be updated in Always statement, with adding some variable to process something.


.. image:: Bagic-PROCESS-sourcecode.png
.. image:: ../../../assets/Bagic-PROCESS-sourcecode.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -49,7 +49,7 @@ Previous project looks like a single image instead of game. Because there is no
pygame.display.flip()


.. image:: Bagic-PROCESS-resultscreen.png
.. image:: ../../../assets/Bagic-PROCESS-resultscreen.png
:class: inlined-right

.. code-block:: python
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Basic INPUT
Usually, we learn how to output something first (Think about Hello World!), learning how to input something is always second. Why? Because input is not the requirement for some program in contrast to output is the requirement for every program. (That’s definition of program. more than or same as 0 input, more than or same as 1 output.) However, every game needs input. That’s why we said “I like playing games”. Playing means moving your part of body (maybe your finger). Anyway, let’s add input logic to make this project into real game.


.. image:: Bagic-INPUT-sourcecode.png
.. image:: ../../../assets/Bagic-INPUT-sourcecode.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -49,7 +49,7 @@ Usually, we learn how to output something first (Think about Hello World!), lear
pygame.display.flip()


.. image:: Bagic-INPUT-resultscreen.png
.. image:: ../../../assets/Bagic-INPUT-resultscreen.png
:class: inlined-right

.. code-block:: python
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ with Advanced PROCESS - Functionalization

First, Let’s print visualized geometry, not text. How about HP bar? If max HP of game is fixed and current HP of game can vary from 0 to max HP, what will be simplest way to print both two data?

.. image:: AdvancedOutputProcess1.gif
.. image:: ../../../assets/AdvancedOutputProcess1.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -44,7 +44,7 @@ First, Let’s print visualized geometry, not text. How about HP bar? If max HP
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedOutputProcess2.gif
.. image:: ../../../assets/AdvancedOutputProcess2.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -76,7 +76,7 @@ First, Let’s print visualized geometry, not text. How about HP bar? If max HP
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedOutputProcess3.gif
.. image:: ../../../assets/AdvancedOutputProcess3.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -110,7 +110,7 @@ First, Let’s print visualized geometry, not text. How about HP bar? If max HP

Yeah, just re-rendering text when certain variable is changed. How to change variable? That logic is inside of Event statement. (Pressing up or down to adjust HP.) Same method as before. But they are still text, which means they are not visualized enough. How to visualize these two data more detail (max HP, current HP)? We can use idea of magazine (gun’s magazine). HP is integer value, which is discrete. So, it can be printed as below:

.. image:: AdvancedOutputProcess4.gif
.. image:: ../../../assets/AdvancedOutputProcess4.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -142,7 +142,7 @@ Yeah, just re-rendering text when certain variable is changed. How to change var
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedOutputProcess5.gif
.. image:: ../../../assets/AdvancedOutputProcess5.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -174,7 +174,7 @@ Yeah, just re-rendering text when certain variable is changed. How to change var
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedOutputProcess6.gif
.. image:: ../../../assets/AdvancedOutputProcess6.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -274,4 +274,3 @@ Furthermore, now it’s time to functionalize specifically. I push Always statem

if __name__ == '__main__': #7
main()

Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ with Advanced OUTPUT – Buttons

Even if KEYDOWN event is used, it seems like this is not entirely GUI game because GUI of this game is only used for output(=print), not input. Input for GUI means caring mouse event for specific location. How about making two buttons to increase or decrease HP?

.. image:: AdvancedInputOutput1.gif
.. image:: ../../../assets/AdvancedInputOutput1.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -44,7 +44,7 @@ Even if KEYDOWN event is used, it seems like this is not entirely GUI game becau
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedInputOutput2.gif
.. image:: ../../../assets/AdvancedInputOutput2.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -78,7 +78,7 @@ Even if KEYDOWN event is used, it seems like this is not entirely GUI game becau

Okay, making two buttons is simple. Look at the button, they have unique visual shape. How can it be? Simple as previous idea: First, draw **big square**. Second, draw **smaller square** which has small width (this square doesn’t have inner color so color of big square can be displayed) so inner square and outer square seems like separated. But these buttons are still for output only. We need to make click area for this.

.. image:: AdvancedInputOutput3.gif
.. image:: ../../../assets/AdvancedInputOutput3.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -110,7 +110,7 @@ Okay, making two buttons is simple. Look at the button, they have unique visual
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedInputOutput4.gif
.. image:: ../../../assets/AdvancedInputOutput4.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -142,7 +142,7 @@ Okay, making two buttons is simple. Look at the button, they have unique visual
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedInputOutput5.gif
.. image:: ../../../assets/AdvancedInputOutput5.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -266,4 +266,3 @@ In the case of button, input and output area for button must be **identical**. (

if __name__ == '__main__':
main()

Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ and plus alpha

Actually, everything doesn’t seem like a game. Now, we will insert a rule into this program. Then. It will become game. Rule is simple: counting red or black from 5x5 2D array and choose the color which has much more number! If correct, HP++, otherwise, HP--. Then new array will be set for next quiz! too simple but game which can be made in this tutorial. First, we need to generate 2D array and print it. How? We learned how to print integer data (which equals single data (0D array)) and two buttons (which equals single array (1D array). Case of 2D array just needs one-more step.

.. image:: AdvancedOutputAlpha1.gif
.. image:: ../../../assets/AdvancedOutputAlpha1.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -44,7 +44,7 @@ Actually, everything doesn’t seem like a game. Now, we will insert a rule into
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedOutputAlpha2.gif
.. image:: ../../../assets/AdvancedOutputAlpha2.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -76,7 +76,7 @@ Actually, everything doesn’t seem like a game. Now, we will insert a rule into
screen.blit(ball, ballrect)
pygame.display.flip()

.. image:: AdvancedOutputAlpha3.gif
.. image:: ../../../assets/AdvancedOutputAlpha3.gif
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -256,4 +256,3 @@ Actually, there are a lot of idea for improving this game. How about changing bu

if __name__ == '__main__':
main()

4 changes: 2 additions & 2 deletions docs/reST/tutorials/es/ChimpanceLineaporLinea.rst
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ del chimpancé para ti mismo en el directorio de ejemplos.

(no, este no es un anuncio, es una captura de pantalla)

.. image:: chimpshot.gif
.. image:: ../assets/chimpshot.gif
:alt: chimp game banner

:doc:`Full Source <../chimp.py>`
Expand Down Expand Up @@ -557,4 +557,4 @@ El usuario ha salido del juego, hora de limpiar (clean up) ::
Hacer la limpieza, el cleanup, de la ejecución del juego en *pygame* es extremandamente
simple. Ya que todas las variables son automáticamente destruidas, nosotros no
tenemos que hacer realmnete nada, únicamente llamar a `pg.quit()` que explicitamente
hace la limpieza de las partes internas del pygame.
hace la limpieza de las partes internas del pygame.
Binary file removed docs/reST/tutorials/es/chimpshot.gif
Binary file not shown.
Binary file not shown.
Diff not rendered.
Diff not rendered.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Contact: [email protected]
게임도 프로그램의 일부이기 때문에, 게임은 입력, 처리 그리고 출력으로 구성된다. C 콘솔 환경에서 게임을 만든다고 가정해 보자(C로 소스코드를 작성한 후 콘솔에서 실행하는 방식). 그러면 입력은 수많은 scanf(또는 엔터 입력 필요 없는 비표준 getch) 함수로, 처리는 항상 절차적으로 실행되는 복잡한 알고리즘으로, 출력은 아스키아트를 이용한 printf(그리고 화면을 지우는 깜빡거리는 clear)함수로 구성할 수 있다. 하지만 이렇게 만든 게임은 구식이고, 그래픽 없는 CUI고, 끉겨 보인다는 단점이 있다. 이런 식의 게임을 만드는 것이 질린다면, 보통 Unity 게임엔진이나 Unreal 게임엔진 등 게임 엔진에도 손을 대보게 된다. 하지만, 게임 엔진은 입문장벽이 높다는 단점이 있다. 복소수좌표를 활용한 공간상에서의 충돌, Mechanin/Legacy 애니메이션 호환성, 더 좋은 그래픽을 위한 더 큰 메모리/더 빠른 CPU… 아무래도 콘솔 환경과 게임 엔진 사이에는 딜레마가 있는 것 같다. 이 딜레마를 해결할 수 있을까?


.. image:: introduction-PuyoPuyo.png
.. image:: ../../../assets/introduction-PuyoPuyo.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -51,7 +51,7 @@ Contact: [email protected]
(C 콘솔 환경 게임의 예시 - 뿌요뿌요)


.. image:: introduction-TPS.png
.. image:: ../../../assets/introduction-TPS.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -88,7 +88,7 @@ Contact: [email protected]
다행히 파이게임은 그 딜레마를 해결할 수 있다. 파이게임 이란 프로그래머가 게임을 만들 수 있게 해 주는 파이썬의 외부 라이브러리이다. 파이게임은 콘솔 환경에서의 장점을 가지고 있다. 그 첫째 장점은 하나의 파이게임 프로젝트은 하나의 소스코드와 거의 동치관계라는 것이다. (외부 소리 파일이나 외부 사진 파일을 제외화면) 그래서 프로그래머는 소스 코드를 작성하는 것에만 집중하면 된다. 그리고 둘째 장점은 파이게임은 툴이 아닌 라이브러리이기 때문에, 소스파일에 “import pygame”만 있으면 그 소스파일은 파이게임의 모든 것에 접근할 수 있게 된다. 접근성이 좋다는 것이다. 파이게임은 게임 엔진의 장점도 가지고 있다. 그 첫째 장점은 파이게임이 키보드, 마우스, 파일 등의 상태를 확인하는 입력 관련 함수들과, 도형 그리기, 색 칠하기, 디스플레이 설정 등의 출력 관련 함수들을 제공하기 때문에, CUI가 아닌 GUI 환경에서 실행된다는 것이다. 그리고 둘째 장점은 파이게임이 파이썬에 기반하였기 때문에, 파이게임의 함수들은 절차적이 아닌 이벤트적(여러 함수들이 선택적으로 실행되거나 거의 동시에 실행됨)으로 실행된다는 것이다.


.. image:: introduction-Battleship.png
.. image:: ../../../assets/introduction-Battleship.png
:class: inlined-right

.. code-block:: python
Expand Down
Diff not rendered.
Diff not rendered.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Contact: [email protected]
앞서 말했듯, 파이게임은 GUI를 기반으로 한다. 정확히는, 파이게임은 2D용 입력, 출력 함수를 사용하여 2D GUI를 기반으로 한다. 어찌됐든, CUI환경에서만 먹히는 파이썬의 print함수나 input함수와는 이별을 해야 한다. 그렇다면, 파이게임의 어떤 함수가 print/input함수를 대체하는가? 우선, 프로그래밍 언어의 기본 형식과 출력을 배우는 친숙한 예제인 “Hello World!”프로젝트로 되돌아가야 한다. (이 프로젝트는 같은 디렉토리에 .ttf확장자를 가지는 폰트 파일을 필요로 한다.)


.. image:: Basic-ouput-sourcecode.png
.. image:: ../../../assets/Basic-ouput-sourcecode.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -49,7 +49,7 @@ Contact: [email protected]
pygame.display.flip()


.. image:: Bagic-ouput-result-screen.png
.. image:: ../../../assets/Bagic-ouput-result-screen.png
:class: inlined-right

.. code-block:: python
Expand Down
Diff not rendered.
Diff not rendered.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Contact: [email protected]
이전 프로젝트는 게임이 아니라 이미지 한 장 같아 보인다. 출력을 바꾸는 입력이나 처리가 없기 때문이다. 물론, 윈도우의 종료 버튼을 누르는 것은 고려되지 않는다 (프로그램을 종료하는 것에 불과하므로). 우선, 우리는 “Hello World!”가 자동적으로 움직이게 할 것이다. 그러면 이제 프로젝트는 이미지 한 장이 아닌 애니메이션 같아 보일 것이다. 어떻게 텍스트를 움직일까? 우리는 텍스트의 위치가 Initial statement에서 초기화됨을 알고 있다. 그렇다면, 이 위치가 Always statement에서 업데이트되게 하면 된다. 물론, 추가적인 변수가 필요할 것이다.


.. image:: Bagic-PROCESS-sourcecode.png
.. image:: ../../../assets/Bagic-PROCESS-sourcecode.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -49,7 +49,7 @@ Contact: [email protected]
pygame.display.flip()


.. image:: Bagic-PROCESS-resultscreen.png
.. image:: ../../../assets/Bagic-PROCESS-resultscreen.png
:class: inlined-right

.. code-block:: python
Expand Down
Diff not rendered.
Diff not rendered.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Contact: [email protected]
생각해보면, 우리는 무언가를 출력하는 방법을 먼저 배우고(“Hello World”를 생각해봐라) 무언가를 입력하는 방법은 나중에 배운다. 왜 그런가? 왜냐면 입력은 몇몇 프로그램에선 필수조건이 아니지만, 출력은 모든 프로그램에선 항상 필수조건이기 때문이다. (프로그램의 정의: 0개 이상의 입력, 1개 이상의 출력) 그러나, 모든 게임은 입력이 필요하다. 그것이 우리는 “나는 게임을 Play한다”라고 말하는 이유이다. Play라는 단어는 몸의 일부분(아마도 손가락)을 움직인다는 뜻이다. 어쨌든, 이 프로젝트가 진짜 게임이 되기 위해 입력 로직을 추가해보자.


.. image:: Bagic-INPUT-sourcecode.png
.. image:: ../../../assets/Bagic-INPUT-sourcecode.png
:class: inlined-right

.. code-block:: python
Expand Down Expand Up @@ -49,7 +49,7 @@ Contact: [email protected]
pygame.display.flip()


.. image:: Bagic-INPUT-resultscreen.png
.. image:: ../../../assets/Bagic-INPUT-resultscreen.png
:class: inlined-right

.. code-block:: python
Expand Down
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Loading