브로셔

다운로드 방법

모래밭

편집기는 Chrome 브라우저, 태블릿 또는 휴대폰에서만 작동합니다 . 단, 에디터를 먼저 제거하여 내보내는 게임에는 제한이 없습니다.

살다
다운로드
- bacione.html 다운로드
- 파일 관리자를 열어보세요
- Chrome 브라우저에서 실행하려면 bacione.html을 클릭하세요.
- 스키 게임을 플레이하려면 실행을 클릭하세요.
Games.pdf - 스키와 Marslander를 위한 튜토리얼
YouTube - 제품 데모
Reddit - 레딧 토론
Github - Github 토론

바시오네?

Bacione은 "Keep It Satisfyingly Simple"에서와 같이 "큰 키스"를 의미합니다.

목적

오프라인으로 전화로 작은 자바스크립트 게임 프로그래밍하기

사명

동급에서 가장 친숙한 IDE 만들기

설계

이 편집기의 디자인 목표는 컴퓨터가 없거나 작은 JavaScript 게임 프로그래밍을 위해 휴대폰이나 태블릿을 선호하는 사람들에게 즐거운 경험을 제공하는 것입니다. 해결된 추가 제약 조건은 오프라인 상태이고 외부 키보드가 없는 것(엄지 손가락이나 스타일러스로 화면에 입력)입니다. 이 사용 사례에 적합한 많은 편집기와 키보드 앱이 있지만 모두 차선책입니다. 두 가지 주요 문제는 1) 특수 문자 액세스 및 2) 리팩토링에 대한 클릭 수를 줄이는 것입니다. #1을 해결하려면 추가 키 기능을 지원하거나 키보드 앱을 설치해야 합니다. #2를 해결하려면 리팩토링에 필요한 클릭 수를 줄여야 합니다. 이 두 가지 문제를 해결한 후에는 화면의 많은 부분을 차지하여 코드 영역을 위한 공간이 거의 남지 않습니다. 이 문제를 해결하기 위해 편집기에는 내장 키보드와 효율적인 리팩토링 도구가 포함되어 있습니다.

특징

다른 전화 편집기에 비해 클릭수가 적습니다.
일반적인 키는 한 번의 클릭으로 가능합니다.
상황 인식 논리로 클릭이 줄어듭니다.
코드를 리팩터링하는 작업이 줄어듭니다.
완전히 프로그래밍 가능한 키보드.
자신만의 키보드 아이콘과 기능을 만들어보세요.
휴대폰과 태블릿용으로 설계되었습니다.
설정이 필요하지 않습니다.
파일 1개.
공유하기 쉽습니다.
오프라인.
일반 바닐라 JavaScript.
종속성이 없습니다.
무료(GPL 라이센스)
광고 없음
Chrome 브라우저의 Android 파일 관리자에서 실행하세요.
편집기를 수정하기 쉽습니다.
편집기에서 편집기를 편집합니다.
편집기는 7KB에 불과합니다.
스와이프 및 길게 누르기-반복을 지원합니다.

제한 사항

세로 모드 지원 : 이 편집기는 세로 모드만 지원합니다.
호환성 : 편집기는 태블릿이나 휴대폰의 Chrome 브라우저에서만 작동합니다. 그러나 에디터를 제거하여 내보낸 게임에는 이러한 제한이 없습니다.
다중 파일: 편집기는 대규모 게임이나 다중 파일 프로젝트용으로 설계되지 않았습니다. 이는 Chrome 브라우저의 Android 파일 관리자에서 HTML 파일을 여는 것이 여러 파일을 지원하지 않기 때문입니다. 모든 것이 하나의 모놀리식 HTML 파일 내에 포함되어야 합니다. 이는 또한 외부 이미지나 오디오 파일을 사용할 수 없음을 의미합니다. 대신 프로그래밍 방식으로 생성된 요소를 활용할 수 있습니다. 예를 들어 Marslander 게임은 벡터 그래픽과 노이즈 생성기를 사용하고 다른 여러 게임에서는 이모티콘을 사용합니다.

이 편집기가 귀하의 요구 사항을 지원하지 않는 경우 Termux 및 Apache와 함께 Neovim을 사용해 보는 것이 좋습니다. 해당 도구에 대한 구성은 여기에서 찾을 수 있습니다.

문제

커서 정렬 오류 : 편집기 창에서 파일 끝 부분을 세게 위로 스와이프하면 커서가 텍스트와 정렬되지 않을 수 있습니다. 제안된 해결 방법은 끝에서 약간 물러나는 것입니다.

메모

아래 변경 사항 에 대한 참조는 다이아몬드 기호로 표시되는 기타 버튼에 있는 편집자 편집 기능을 나타냅니다.

Edit-the-Editor : 에디터 내에서 에디터를 편집할 수 있습니다. 그러나 라이브가 아니므로 저장을 클릭하고 새로 생성된 타임스탬프가 있는 HTML 파일을 열어야 합니다. 새 것이 손상된 경우 이전 것을 엽니다. 이 기능은 간단한 변경을 지원하는 것입니다. 복잡한 변경은 Neovim과 같은 보다 강력한 환경에서 수행되어야 합니다.
실행 : 실행 버튼은 커서가 포함된 게임을 실행하거나 중지합니다. 단순화를 위해 게임 프레임은 정사각형이며 키보드 위에 표시됩니다. 이를 통해 편집과 실행 사이를 쉽게 전환할 수 있습니다( 왕복 2번 클릭 ). 이것이 제한적인 것처럼 보이고 더 큰 게임 프레임을 원한다면 라이브러리에서 편집기나 캔버스 크기 조정 코드를 변경 하거나 라이브러리를 사용하지 않아도 됩니다. 또한 게임 내보내기 버튼을 사용하여 편집기 보기에 있는 모든 것을 내보낼 수 있습니다. importgame() 함수의 작동 방식을 변경하고 싶을 수도 있습니다. 내보내기 사용의 단점은 Android 파일 관리자에서 해당 HTML 파일을 실행해야 한다는 것입니다( 왕복 7번 클릭 ).
키보드 크기 : 키보드의 크기는 정사각형 게임 프레임을 고려한 후 남은 영역입니다. 즉, 휴대폰의 키보드 너비는 대략 화면 너비이고 태블릿에서는 화면 너비의 약 절반입니다.
키보드 위치 : 태블릿에서 키보드는 오른쪽 하단에 위치합니다. 오른쪽 엄지손가락 대신 왼쪽 엄지손가락을 사용하여 입력하는 경우 변경할 수 있습니다.
사용자 정의 키보드 기능 : 이 편집기는 한 번의 클릭으로 모든 주요 기능에 액세스할 수 있는 사용자 정의 키보드를 갖추고 있기 때문에 특히 유용합니다. 이를 지원하기 위해 프로그래밍에 중요한 32개의 특수 문자 중 22개는 한 번의 클릭으로 액세스할 수 있고 나머지 10개는 Shift 키를 통해 액세스할 수 있습니다. 스페이스 키는 오른쪽 하단 모서리에 위치하여 비정상적으로 작습니다. 또한 백스페이스 및 리턴 키는 다른 키와 자주 조화를 이루기 때문에 두 번째 행에 있습니다. 예를 들어 텍스트를 자르려면 복사를 누른 다음 백스페이스를 누르고, 선택을 취소하려면 Return 키를 누릅니다. 이 레이아웃이 마음에 들지 않으면 변경할 수 있습니다.
선택 : 이 편집기의 가장 큰 장점은 효율적인 선택입니다. 선택은 상황에 따라 이루어집니다. 커서의 위치에 따라 단어, 줄, 단락 또는 코드 블록이 선택됩니다. 선택이 어떻게 이루어지는지 보려면 YouTube 동영상을 시청하세요. 선택은 복사 버튼으로 수행됩니다. 즉, 두 가지 작업이 동시에 수행됩니다. 이는 주로 버튼의 양을 줄이기 위한 것입니다. 잘라내기는 두 단계로 이루어집니다. 복사(선택 및 복사)를 클릭한 다음 백스페이스(선택 항목 삭제)를 클릭합니다. 복사 후 Enter 버튼을 클릭하면 커서가 선택 항목의 끝 부분으로 이동됩니다. 잘라내기(복사/백스페이스)에 한 줄이 포함되어 있으면 커서가 한 줄 앞으로 이동합니다. 이는 줄을 잘라 다음 줄 뒤에 붙여넣는 것이 사용자의 의도인 경우가 많기 때문입니다. 이는 코드를 리팩토링할 때 클릭 횟수를 줄이는 데 도움이 됩니다. 선택(복사)은 탐색에도 사용할 수 있습니다. 예를 들어 커서를 블록 끝으로 이동하고 커서를 시작 블록 문자 앞에 놓은 다음 복사를 클릭하고 Enter를 클릭합니다. 그러나 사용하려는 붙여넣기 버퍼에 무언가가 있는 경우에는 그렇게 하지 마십시오. 여러 번 복사를 클릭하면 선택 규칙에 따라 선택 항목이 확장되고, 화살표 키를 누르면 선택 항목이 한 번에 한 문자씩 확장(또는 확장 취소)됩니다.
복사 및 붙여넣기 : 편집기 내에서 코드를 복사하고 붙여넣으려면 편집기의 내부 복사 및 붙여넣기 버튼을 사용해야 합니다. 외부 소스에서 코드를 복사하려면 길게 누른 후 복사 및 붙여넣기를 선택하는 등 시스템 복사 및 붙여넣기 기술을 사용하세요.
서식 : 휴대폰에서는 편집자의 공간이 매우 중요하며 공백, 특히 가로 공백을 많이 감당할 수 없습니다. 들여쓰기의 경우 Space 키(Tab 키 없음)를 사용할 수 있으며 Enter 키를 누르면 이전 들여쓰기가 유지됩니다. 분기와 루프에만 들여쓰기를 사용하고 함수 본문을 들여쓰기하는 대신 앞뒤에 수직 공백을 사용하세요. 예를 보려면 Marslander 게임을 참조하세요.
댓글 버튼 : 댓글 버튼은 디버깅에 매우 유용합니다. Comment 버튼을 누르면 코드에 주석을 달고 붙여넣기 버퍼에 복사본을 넣습니다. 다음 단계는 이를 붙여넣은 다음 편집하는 것입니다. 새 코드의 결과가 마음에 들지 않으면 해당 코드를 삭제하고 원본의 주석 처리를 제거하기 쉽습니다.
탐색 : 탐색은 주로 화면을 터치하여 수행되므로 홈, 종료 또는 세로 화살표 키가 없습니다. 대신 대략적인 위치를 터치한 후 커서를 정확하게 위치시킬 수 있도록 좌우 화살표가 제공됩니다. 텍스트 크기를 늘리는 확대/축소 키를 사용하면 커서를 올바른 위치에 배치하는 데 도움이 될 수도 있습니다.
권장 크기 : 휴대폰에서 코드를 탐색하는 것은 상당히 어려울 수 있으므로 한 번의 동작으로 스크롤할 수 있을 만큼 작은 게임을 만드는 것이 좋습니다.
전체 화면 : 전체 화면 모드를 활성화하면 코드 탐색 및 편집을 위한 더 많은 공간이 제공됩니다. 확대/축소 버튼을 위로 스와이프하면 전체 화면으로 전환할 수 있습니다.
뷰 닫기 : 닫기 버튼이 없습니다. 보기를 닫으려면 아무 곳이나 클릭하거나 옵션을 선택하세요. 보기는 도움말, 기타, 차이점 및 오류입니다.
이모티콘 생성 : 기타 보기를 처음 열면 아이콘이 로드되는 데 약간의 시간이 걸립니다.
Pickers : Color-Picker와 Icon-Picker는 Paste에 코드를 넣어두므로 아무 일도 일어나지 않은 것 같아도 놀라지 마세요. 코드를 보려면 붙여넣기 버튼을 클릭하세요.
오류 감지 : 이 편집기에는 실시간 오류 감지(입력 시) 기능이 없습니다. 실행을 클릭하면 오류가 발견됩니다. 오류 메시지가 표시되고 오류가 사라지면(해당 뷰의 아무 곳이나 클릭하여) 오류가 발생한 코드에 커서가 자동으로 배치됩니다. 때로는 일치하는 쌍이 필요한 괄호나 기타 블록 문자를 잊어버린 경우 오류 메시지가 명확하지 않은 경우도 있습니다. 이를 돕기 위해 부속 프로세스는 모든 블록 문자를 순진하게 계산하여 짝수인지 확인하고 오류 보기에 추가 메시지를 표시합니다.
Diff 기능: Diff 기능은 단순 하며 정확한 결과를 생성하지 않습니다. 파일을 열었거나 마지막으로 저장한 이후 진행 상황에 대한 대략적인 표시만 제공하도록 설계되었습니다.
저장 메커니즘: 편집기의 저장 기능은 HTML 제약 조건에 의해 제한됩니다. 해결 방법으로 저장할 때마다 새로운 타임스탬프 파일이 생성됩니다. 다운로드 폴더에 저장하는 경우 다른 목적으로 사용된 파일이 없도록 유지하는 것이 중요합니다. 이렇게 하면 작업 내용을 빠르게 다시 열기가 어려울 수 있습니다. 또한 최신 버전만 유지하면서 오래된 편집기 HTML 파일을 주기적으로 삭제하세요.
테마 : 편집기는 사용자 정의 가능한 보기 환경을 위해 밝은 테마와 어두운 테마를 모두 제공합니다. 기타 버튼을 위로 스와이프하면 테마 간에 전환할 수 있습니다. 더 변경 하거나 추가할 수도 있습니다.