PySketch 살펴보기: Python for Fun!

PySketch.com은 창의적인 코딩을 좋아하는 모든 사람에게 소셜 코딩 경험을 제공하는 것을 목표로 하는 Python 웹 편집기입니다. HTML5 및 JavaScript 라이브러리에 액세스할 수 있는 재미있는 프로젝트, 게임, 그래픽을 구축하거나 다른 재능 있는 개발자의 다른 Python 프로젝트를 탐색하여 웹에서 Python 기술을 향상하거나 선보일 수 있습니다. 모든 주요 모바일 및 데스크톱 브라우저에서 작동하며 프로젝트 및 게임을 친구와 공유하거나 청중을 위해 블로그에 포함할 수 있습니다.

Python 사용자라면 PySketch을(를) 사용하여 집처럼 편안하게 모든 HTML5 기능을 즐길 수 있습니다!

pysketch에서 수행된 이 유명한 Flappy Bird 게임을 확인하십시오.



시작하기: 바운싱 로고
꼭 필요한 부분을 커버하는 바운싱 로고 스케치를 하여 기초를 배워보겠습니다. 가장 많이 알려진 스크린 세이버이고, 여기서 빌드하면 재미있을 것입니다. 다음은 최종 스케치입니다. 자유롭게 코드를 가지고 놀고 실행하세요.



코드를 자세히 살펴보겠습니다.

모듈 로딩

from browser import document, window
from browser.html import CANVAS, IMG
from random import randint

Document 및 window 모듈은 해당 JavaScript 버전과 동일합니다. JavaScript 속성, 전역 변수 등에 액세스하기 위한 것입니다.browser.html는 HTML 태그용 래퍼 모듈입니다. 이를 통해 Python에서 쉽게 dom 요소를 만들고 조작할 수 있습니다. 다른 모든 태그 및 예제는 확인하십시오here..

돔 아피

canvas = CANVAS(width=width, height=height)
document.body <= canvas

ctx = canvas.getContext('2d')

여기에서 캔버스 요소를 만들어 HTML 페이지의 본문에 추가합니다. ctx는 그리기 작업을 수행하는 캔버스의 컨텍스트입니다. 캔버스 API에 대해서는 자세히 다루지 않지만 더 많은 정보를 얻을 수 있습니다here..

애셋 로드 중

logo = IMG(src ='logo.png')
logo.onload = lambda e: loop(0)

파일은 비동기식으로 로드됩니다. 즉, 다음 줄에서 이미지를 사용할 수 없으며 로드하는 데 시간이 걸립니다. 그래서 여기서 onload 콜백을 설정합니다. 로고가 로드되면 앱이 루핑을 시작합니다. 루프 부분은 나중에 다루겠습니다.

PySketch는 스케치에서 사용할 수 있는 자산에 대한 클라우드 호스팅을 제공합니다. Sketch Details -> Files 탭으로 이동하여 스케치용 자산을 업로드합니다.

위의 코드 스니펫에서 볼 수 있듯이 스케치 자산은 파일 이름으로 로드할 수 있습니다.



그리기 기능

def draw():
  global x, y, x_speed, y_speed
  ... does calculations here
  ctx.drawImage(logo, x, y)

이것은 주요 그리기 기능이며 속도를 고려하여 새 위치를 계산하고 캔버스 컨텍스트에서 로고를 렌더링합니다. 컨텍스트에 대한 아이디어를 얻으려면 최종 스케치에 대한 인라인 주석을 읽으십시오.

메인 루프

def loop(t):
  draw()
  window.requestAnimationFrame(loop)

이것은 대부분의 그래픽 앱의 핵심입니다. 프로그램의 전체적인 흐름을 말하며 수동으로 정지할 때까지 무한 루프를 유지합니다. 브라우저에는 내장requestAnimationFrame 기능이 있습니다. 페이지를 차단하지 않고 브라우저에서 부드러운 애니메이션을 실행하도록 설계되었습니다. 브라우저가 다음 다시 그리기를 수행하기 전에 애니메이션 기능이 호출됩니다. 콜백 횟수는 일반적으로 새 프레임을 요청하는 경우 초당 60회입니다.

이 루프에서는 draw 함수를 호출하고 그린 후 새 프레임을 재귀적으로 요청합니다. 이 프로세스는 앱을 중지할 때까지 영원히 반복됩니다.

Python은 브라우저에서 어떻게 실행되고 있습니까?
Brython , Transcrypt , Skulpt , Pyodide 과 같은 몇 가지 인상적인 프로젝트가 Python을 브라우저에 제공합니다. PySketch는 Python을 브라우저에서 JavaScript로 컴파일하는 Brython을 사용합니다. 자세한 내용은 기술 및 비교에 대한 this article을 참조하십시오.

결론
PySketch를 사용하여 Python 기반 앱을 브라우저에 직접 구현하는 방법을 살펴보았습니다. JavaScript 및 웹 개발에 익숙하다면 Python을 사용하여 앱과 게임을 빌드하는 것을 즐길 수 있습니다.

속도, 사용성, 유지보수 측면에서 JavaScript를 대체할 수 없다는 것은 의심의 여지가 없지만 HTML5를 즐길 수 있는 다른 방법이 있다는 것을 아는 것이 좋습니다.

더 많은 예제와 자습서를 보려면 pysketch.com을 방문하십시오.