이제 인삿말을 바꿔보자. 일단은 제목이 VisualNovelStudio라서 나는 양식을 이렇게 바꿔줬다.
User 대신에 접속자의 닉네임이 들어가도록 하는 것은 나중이다.
이제 다른 화면에서 대사가 나오도록 해 보자.
커서 ai 와 함께 대사가 나올 수 있는 화면으로 가도록 코드를 짜본다. Kotlin은 모르기 때문에 도움이 필요하다…
먼저 홈화면에서 장면 에디터인 CreateScenarioScreen 으로 넘어가지도록 버튼을 추가하고 액션을 확인했다.
간단한 버튼과 화면 전환
이제 가로 세로 모두 지원되게 해보자.
Android Landscape (가로모드)
나중에 생기는 다른 화면들도 가로 지원되게 바꿔줘야 한다.
이제 배경화면을 넣어보자. 이미지 첨부를 구현하기 위해 coil compose를 사용했다. 그리고 그 결과물이다.
위 아래로 남는 자리에 이제 대사 입력 창이나 인물 추가 버튼을 만들어주면 될 것 같다. 비슷한 기능인 캐릭터(인물) 추가 버튼부터 구현하자. 추가되는 캐릭터는 배경 앞으로 와야 하며, 드래그가 가능해야 한다. 필요하다면 사이즈 조정도 넣어보겠다.
detectDragGestures { change, dragAmount ->
change.consume()
characterPosition = Pair(characterPosition.first + dragAmount.x, characterPosition.second + dragAmount.y)
}
해당 코드를 이용해 꾹 눌렀을 때 이미지가 이동되도록 시도했다.
다시 배경부터 채워서 보자.
마우스 커서보다 캐릭터가 더 빠르게 움직이는 감이 없지 않아 있지만, 그래도 제 역할은 하고 있다. 그렇다면 배경 넣었고, 인물도 추가했으니 인터페이스 작업을 해야 한다. 바로 대사 말이다…