튜토리얼 만들기
튜토리얼을 만드는 것은 일반적인 마켓플레이스 자산 패키지를 만드는 것과 유사하지만, 특정 포함 파일을 추가하고 초기 튜토리얼 페이지(선택적 비디오 페이지 포함)를 추가해야 합니다. 튜토리얼 작업 공간은 다음과 같은 형태로 보일 것입니다.
기본 설정
일반 마켓플레이스 자산과 마찬가지로, 퍼블리셔를 선택하고 튜토리얼의 이름과 고유 ID(역 URL 형식)를 지정해야 합니다. 그런 다음 "유형" 드롭다운에서 튜토리얼을 선택합니다. 이렇게 하면 튜토리얼을 시작할 기본 HTML 파일과 선택적 비디오 파일 및 URL을 추가할 수 있는 추가 옵션이 제공됩니다. 비디오 파일은 마켓플레이스에서 제공하는 템플릿을 사용해야 하며, 튜토리얼의 나머지 부분도 마찬가지입니다. 사용자가 튜토리얼을 로드하면 비디오는 IDE 내의 별도 프레임에 로드됩니다.
시작 페이지와 비디오 페이지에 제공하는 경로는 포함된 파일 내의 상대 경로이며, 기본적으로 GameMaker가 필드를 채우는 것 외에 다른 파일을 선택하려면 탐색기를 열 수 있습니다.
튜토리얼 파일 구조
튜토리얼을 실제로 만들려면 포함된 파일을 튜토리얼 프로젝트에 추가해야 하며, IDE가 튜토리얼에 사용할 파일을 올바르게 감지할 수 있도록 매우 특정한 방식으로 추가해야 합니다. 기본 폴더 구조는 다음과 같습니다:
| 폴더 이름 | 설명 |
|---|---|
| TutorialContent | 모든 튜토리얼 HTML 파일, 스타일링을 위한 CSS, 튜토리얼에 필요한 이미지가 포함됩니다. 기본 HTML 파일이 하나 이상 있어야 합니다. |
| TutorialResources | 이미지와 사운드 자산을 위한 두 개의 하위 폴더가 포함됩니다. 필요한 경우 스프라이트를 추가할 수 있습니다. |
이 폴더 구조와 기본 HTML 시작 페이지 및 스타일링을 위한 CSS 파일이 있어야 IDE 내에서 튜토리얼이 작동합니다.
특별 링크
튜토리얼 프로젝트 내에서 비디오의 특정 부분으로 건너가거나 특정 섹션이나 기능에 대한 매뉴얼을 열 수 있는 여러 특별 링크를 사용할 수 있습니다. 이러한 링크는 마켓플레이스의 공식 튜토리얼 템플릿에서 제공됩니다.
템플릿 다운로드
자신의 튜토리얼을 만들기 전에 마켓플레이스에서 튜토리얼 템플릿을 다운로드하는 것을 강력히 권장합니다. 템플릿에는 HTML, CSS 및 버튼과 메뉴를 재현하기 위한 이미지의 모든 중요한 부분의 예가 포함되어 있어, 콘텐츠에 집중할 수 있습니다.
튜토리얼 업로드
포함된 파일을 설정하고 필요한 정보를 제공한 후 "확인"을 클릭하면 튜토리얼이 마켓플레이스에 업로드됩니다. 완료되면 자산 목록에서 작업 공간이 열리며, 아이콘, 텍스트, 스크린샷 등을 추가할 수 있습니다. 튜토리얼 자산이 게시되면 사용자는 시작 페이지의 튜토리얼 섹션에서 이를 찾아 다운로드하고 설치할 수 있습니다.
활용 예제
// 튜토리얼 시작 페이지 HTML 예제
<!DOCTYPE html>
<html>
<head>
<title>튜토리얼 제목</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>튜토리얼에 오신 것을 환영합니다!</h1>
<p>이 튜토리얼에서는 기본적인 사용법을 설명합니다.</p>
</body>
</html>
// CSS 파일 예제
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: #2c3e50;
}
// 비디오 템플릿 예제
<video width="320" height="240" controls>
<source src="tutorial_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
// 이미지 추가 예제
<img src="images/example_image.png" alt="예시 이미지">
// 사운드 자산 추가 예제
<audio controls>
<source src="sounds/example_sound.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>