아날로그 어 헤이트 스토리 따라하기

범위

체험판(..) 의 메인 메뉴를 따라 만들어봤습니다.

준비자료

메인 메뉴 꾸밀 이미지들입니다.
아이콘/버튼/배경은 게임 캡쳐 따서(..) 만들었고, 로고는 일부러 다르게 만들었습니다.
그림 파일 이름은 스크립트에서 그대로 사용했으니 이왕이면 바꾸시지 않는 게 스크립트 시험해보기엔 편하실 듯.

스크립트

options.rpy

script.rpy

screens.rpy

메인 메뉴를 손보기 위해서 screens.rpy 의 screen main_menu 블록 및 기타 블록을 새로 작성/수정하였습니다.

# Main Menu 
#
# 렌파이를 실행할 때 처음으로 나타나는 메인 메뉴를 표시하는 데 사용되는 스크린

init:
    
    # 메인 메뉴에서 쓸 배경.
    # x위치 -33 에서 0으로 반복해서 움직일 뿐이지만
    # 그냥 보기에는 무한히 오른쪽으로 움직이는 것처럼 보임
    image bg mainmenu:
        "bg_mainmenu.jpg"
        xpos -33 ypos 0
        linear .5 xpos 0 ypos 0
        repeat
            
    # analog a hate story 로고
    image title:
        'title.png'
        xpos 260 ypos 95
        
        on show: # 처음 이 이미지가 등장할 때만 아래와 같은 효과를 적용합니다.
            alpha 0 
            pause 1 # 처음 등장할 땐 뜸 들이다가 로고가 뜨도록.
            linear 1 alpha 1
  
            
    transform fadein: # 메인 메뉴 버튼에 적용할 트랜스폼
        on show: #처음 등장할 때만
            alpha 0 
            linear 1 alpha 1 # 서서히 나타나도록 하는 효과를 적용
        
        on replaced: # game menu 스크린과 교체될 때는
            alpha 1 # 그냥 투명도값 100%
            
screen main_menu:

# This ensures that any other menu screen is replaced.
    tag menu

# The background of the main menu.
    #window:
        #style "mm_root"

#위 init 블록에서 지정했던 메인 메뉴 배경화면
    add 'bg mainmenu' at alpha
    
    # 메인 메뉴 버튼
    frame: 
        # 메인메뉴 버튼에 적용되는 스타일에 mm이라는 접두어를 붙임
        style_group 'mm'

# style_group 적용하려고 만든거라 배경 화면은 투명하게
        background '#fff0'

# 이 프레임 안에 들어있는 모든 버튼에
        # 아까 지정했던 페이드인 효과 지정
        at fadein

# init 에서 지정했던 게임 제목 'title' 추가
        add 'title' 
            
        textbutton "새로 시작" action Start() xpos 80 ypos 415 
        textbutton "이어서 하기" action ShowMenu("load") xpos 380 ypos 415
        textbutton "{size=30}정식 버전은{/size}\n{size=13}아무데서도 구입하실 수 없습니다^.^{/size}" action OpenURL("http://askance.tistory.com/category/렌파이/따라하기") xpos 680 ypos 415

text "체험판" xalign 0.5 ypos 530 color '#686868' size 40 bold True
        
        # 설정 버튼.
        imagebutton idle 'btn_setting_idle.png' hover 'btn_setting_hover.png' action ShowMenu("preferences") xpos 870 ypos 565
        # 종료 버튼
        imagebutton idle 'btn_quit_idle.png' hover 'btn_quit_hover.png' action Quit(confirm=False) xpos 945 ypos 565

init -2 python:

# Make all the main menu buttons be the same size.
    # 메인 메뉴 버튼들의 크기를 모두 같게 합니다.
    style.mm_button.size_group = "mm"
    # 마우스가 올려있을 때 쓸 버튼 배경
    style.mm_button.hover_background = 'button_hover.png'
    # 마우스 안 올려진 버튼에 쓸 배경
    style.mm_button.idle_background = 'button_idle.png' 
    # 버튼 안에 적힌 텍스트의 크기 지정
    style.mm_button_text.size = 40
    # 버튼 안의 텍스트 색상 지정
    style.mm_button_text.color = '#686868'
    # 버튼의 최소 크기 지정
    # 밑에 적은 사이즈는 버튼 배경 이미지의 크기와 동일
    style.mm_button.minimum = (291,90)

기본 폰트를 나눔 명조에서 나눔 고딕으로 바꿨습니다.
오프닝 배경도 원작과 비슷한 것으로 바꾸었습니다.

결과물

오랜만에 건드려서 많이 헤맸네요...

설명

1. transform 에 썼던 on show / on replace

on show:
이미지/ui가 등장할 때 적용되는 트랜스폼
on replace:
이미지/ui가 다른 이미지에서 교체되어 등장할 때 적용되는 트랜스폼

2. 움직이는 배경 그림 원리

그림을 x지점 -33 에서 0으로 움직이도록 하면
그림이 0지점에 도착했을 때는 그림이 -33에 있던 때와 완전히 같게 됩니다
xpos 0의 그림 = xpos -33의 그림
그래서 -33 에서 0으로만 반복해서 가는데도 이 움직임이 무한정 반복되는 듯이 보이는 거죠.
..이건 어떻게 설명하기가 힘드네요 -_-a

반복되는 패턴 크기가 다르다면 x 좌표 값은 다르게 설정해야겠죠..

그냥 눈으로 보면서 맞추면 편합니다;

3.

UI같은 건 이미지 편집 툴처럼 이미지 조작이 편한 프로그램에서 먼저 레이아웃을 짜신 다음에
확정된 레이아웃을 그대로 옮기시는 게 편합니다.
정 귀찮으시면 이미지맵을 사용하시는 게 편할지도..

어쨌든 gui 만들 때는
shift + D 누르시고 이미지 위치 피커를 적극 활용하세요

참고

ATL 강좌
ATL on 문 / on 에 적을 수 있는 외부 이벤트 종류(매뉴얼)

백안시의 공방 - 소설형 게임 제작실

아날로그 어 헤이트 스토리 따라하기 - 4 메인 메뉴

범위

준비자료