멀티플랫폼 게임개발

[react native] 2025년 리액트 네이티브로 프로젝트 시작하기

졸리운_곰 — Fri, 15 Aug 2025 16:09:34 +0900

[react native] 2025년 리액트 네이티브로 프로젝트 시작하기

2025년 리액트 네이티브로 프로젝트 시작하기

February 02, 2025

이 글은 사이드 프로젝트를 진행하기에 앞서 RN을 선택한 이유와 21년까지 경험했던 RN 이후 현재까지의 변경된 내용들에 대한 팔로업에 초점이 맞추어져 있다. 따라서 리액트 웹 개발자가 RN으로 앱 개발을 시작하려 할 때 참고할 수 있다면 좋을 것 같다.

배경

올해 목표 중 하나는 오랫동안 미뤄왔던 사이드 프로젝트를 시작하는 것이었다. 물론 완성까지 하면 너무 좋겠지만, 시작이 반이라는 생각으로 프로젝트 시작부터 해보려고 한다. 그렇기에 가장 먼저 해야 할 것은 기술 스택을 선정하는 것이었는데, 사실 후보군은 많이 있었다. 먼저 내가 만들고자 하는 사이드 프로젝트는 웹 서비스보다는 모바일 앱에 더 잘 어울리기 때문에 앱으로 개발해야겠다고 생각했고, 그렇게 했을 때 선택지는 세 가지 정도로 압축되었다.

안드로이드 또는 iOS 네이티브 앱 개발
하이브리드 앱 개발 - 네이티브 앱에 웹뷰를 통합하여 웹 기술로 대부분의 기능을 구현하는 방법
플러터, RN을 통한 크로스 플랫폼 앱 개발

위의 선택지에서 1번의 경우, kotlin이나 swift와 같은 네이티브 언어 학습이 필요하고, 2번의 경우 네이티브 기능을 자유롭게 활용해야 하는 경우 한계점이 존재하고, 결국에는 네이티브 코드가 필요할 수 있게 된다. 사이드 프로젝트라는 특성을 생각하면 시작하는 데까지 많은 학습과 준비 과정이 필요하다면 프로젝트가 진척되기 힘들 것 같아 개발 경험이 있어 진입 장벽이 비교적 낮은 3번 방법을 선택했다.

React Native를 선택한 이유

플러터와 RN은 예전에 앱 개발을 했을 때도 많이 비교되는 프레임워크였고, 지금까지도 경쟁을 통해 서로 발전하고 있는 관계이기도 하다. 사실 현시점에서는 플러터와 RN 중 어떤 프레임워크를 사용하더라도 사이드 프로젝트를 진행하는 데 이슈가 없지만 다음과 같은 이유로 React Native를 선택했다.

1. 비교적 낮은 러닝커브

현재 프런트엔드 개발을 하고 있기 때문에 리액트는 나에게 제일 익숙한 스택이라고 할 수 있는데, 러닝 커브 면에서는 React Native는 리액트 개발자가 선택할 수 있는 가장 최고의 선택이라고 하고 싶다. 물론 플러터도 과거에 경험해 봤지만, 대부분의 기억이 휘발되었고 Dart 언어를 다시금 학습해야 한다는 부담이 있었기 때문에 웹 FE 개발자로서 기존의 리액트와 Javascript/Typescript를 활용할 수 있고, 플러터보다는 낮은 진입장벽을 가진 React Native를 선택했다.

2. 새로운 아키텍처와 함께 개선된 성능

플러터와 RN은 경쟁 초기부터 계속하여 성능 비교 대상이었다. 그러나 빌드 성능 면이나 복잡한 UI, 애니메이션 렌더링에서는 플러터가 꾸준하게 더 앞선다는 평가가 많았다.

내가 RN을 경험했던 2022년에는 새로운 아키텍처가 베타 단계였으나, 25년 현재에는 새로운 아키텍처가 안정화되어 대부분의 라이브러리가 이를 지원하고 있다. 새로운 네이티브 모듈 시스템이 도입되었고, 다중 스레드에서 동시 업데이트 처리가 가능한 새로운 렌더러가 도입되었다. 그뿐만 아니라 Javascript와 네이티브 런타임 사이에 존재했던 브릿지가 제거되어, 새로운 아키텍처 도입으로 성능이 크게 개선되었다. 특히 UI 렌더링과 브릿지 통신 오버헤드가 대폭 감소했다. 이외에도 여러 가지 최적화를 통해 성능 개선이 이루어졌고, 리액트 18을 완벽하게 지원하게 되었다. 이번 React Native의 혁신적인 개선 사항은 <리액트 네이티브의 새로운 아키텍처가 출시되었습니다>를 통해 좀 더 상세하게 확인할 수 있다.

결과적으로 RN의 성능이 우수하기 때문이 아니라, 성능 문제 때문에 꼭 플러터를 선택할 필요는 없다고 판단되어 RN을 선택한 것이다. 사실 플러터와 RN의 선택에 있어서는 이러한 성능 차이보다는 어떤 프레임워크를 더 숙련도 있게 활용할 수 있느냐가 포인트라고 생각한다.

3. Expo 프레임워크를 통해 얻을 수 있는 이점

Expo는 React Native 개발을 더욱 쉽게 만들어주는 프레임워크다. Expo를 사용하면 네이티브 코드를 전혀 사용하지 않아도 간단하고 여러 가지 장점을 얻을 수 있다는 점도 RN을 선택하게 된 이유 중 하나이다.

네이티브 빌드 환경 설정 없이 바로 개발 시작 가능
OTA(Over-the-Air) 업데이트를 통한 즉각적인 앱 업데이트
푸시 알림, 카메라 등 다양한 네이티브 기능을 JavaScript API로 제공
개발 환경에서 QR코드로 즉시 테스트 가능(Expo Go)

이전에 Expo를 사용했을 때는 Expo에서 지원하는 네이티브 모듈이 제한적이었기 때문에, 뭔가 더 세밀한 제어나 특수한 네이티브 기능이 필요할 경우에는 Expo를 사용하다가 eject를 통하여 Expo를 걷어낸 순수한 RN 프로젝트로의 복잡한 전환이 필요했는데, 현재는 Expo가 많이 발전되어 사실 Expo를 사용하여 웬만한 네이티브 기능을 모두 사용할 수 있게 되었다. 이번에 알게 된 부분은 2025년 기준으로는 Expo의 개발 방식이 변화(EAS Build의 도입)되어 eject는 더 이상 사용되지 않으며 deprecated 되었다고 한다.

Expo를 통한 RN 프로젝트 시작하기

개발 환경 설정

React Native 개발을 시작하기 전에 필요한 기본적인 개발 환경을 구축해야 한다. 먼저 Node.js는 LTS 버전을 설치하는 것을 권장한다. Expo를 사용하면 네이티브 개발 환경(Xcode, Android Studio) 없이도 개발을 시작할 수 있다는 장점이 있다. 다만, 네이티브 기능 개발을 위해 Xcode나 Android Studio 설치가 더 일반적으로 권장된다.

# Expo CLI로 프로젝트 생성 및 개발 시작
npx create-expo-app my-app
cd my-app
npx expo start

Expo CLI vs RN CLI 선택 가이드

과거에는 React Native로 프로젝트를 시작할 때 가장 먼저 고민하게 되었던 것이 Expo CLI와 React Native CLI 중 어떤 것을 선택할지였다. 이전에는 Expo가 제한적인 기능만 제공하고 네이티브 모듈 사용에 제약이 많아 실제 프로덕션 앱 개발에는 RN CLI를 선호하는 경향이 있었다.

하지만 2025년 현재는 상황이 많이 달라졌다. Expo는 ‘Development Builds’와 ‘Config Plugins’ 기능을 통해 네이티브 모듈도 자유롭게 사용할 수 있게 되었고, EAS(Expo Application Services)를 통한 빌드/배포 자동화, OTA 업데이트 등 다양한 기능을 제공하고 있다. 이러한 발전으로 인해 React Native 공식 문서에서도 Expo를 권장하고 있으며, 대부분의 앱 개발 요구사항을 Expo로 충분히 커버할 수 있게 되었다. 때문에 Expo와 React Native CLI 사이의 선택은 더 이상 큰 고민거리가 아니게 되었다.

Expo CLI의 장점

빠른 프로젝트 설정과 개발 시작
간편한 빌드 및 배포 프로세스
풍부한 내장 API와 컴포넌트
OTA 업데이트 지원
Config Plugins를 통한 네이티브 모듈 통합 가능
자동화된 빌드 인프라 제공

React Native CLI의 장점

네이티브 모듈에 대한 완전한 제어
커스텀 네이티브 코드 작성 가능
더 작은 앱 크기
네이티브 빌드 프로세스에 대한 완전한 통제

이러한 장단점을 고려했을 때, 특별히 네이티브 레벨의 깊은 커스터마이징이 필요하지 않은 대부분의 프로젝트에서는 Expo CLI를 선택하는 것이 개발 생산성과 유지보수 측면에서 더 유리하다. 실제로 많은 프로덕션 앱이 Expo를 사용하여 성공적으로 서비스되고 있다.

프로젝트 생성 및 구조

2025년 현재 Expo는 더 현대적이고 유연한 프로젝트 구조를 제공하는 Expo Router를 권장한다.

# 새 프로젝트 생성 (Expo Router + TypeScript)
npx create-expo-app --template

위 명령어를 실행하면 사용자에게 여러 옵션(Blank, Blank (TypeScript), Navigation (TypeScript) 등)을 제공하며, 그중에서 선택할 수 있다.

이 중 Navigation (TypeScript)를 선택하면 Next.js의 App Router와 유사한 파일 기반 라우팅을 지원하는 Expo Router를 포함한 템플릿의 프로젝트를 생성할 수 있다. Expo Router는 React Navigation을 기반으로 하되, 파일 시스템 기반의 더 직관적인 라우팅을 제공한다. 프로젝트 구조는 다음과 같다.

my-app/
├── app/               # Expo Router 기반 페이지
│   ├── (tabs)/       # 탭 네비게이션 그룹
│   ├── modal/        # 모달 스택
│   └── [dynamic]/    # 동적 라우트
│
├── components/        # 재사용 컴포넌트
├── hooks/            # 커스텀 훅
├── providers/        # 컨텍스트 프로바이더
├── services/         # API 및 외부 서비스
├── stores/           # 상태 관리
├── types/            # TypeScript 타입
├── utils/            # 유틸리티 함수
├── assets/           # 이미지, 폰트 등
└── app.json          # Expo 설정

주요 특징

파일 시스템 기반 라우팅으로 직관적인 네비게이션 구조
Expo Router의 lazy loading 활용으로 초기 로딩 성능 최적화
TypeScript와 ESLint 설정 내장
테스트 환경 사전 구성

필수 라이브러리 설정

React Native 프로젝트를 시작할 때 필수적으로 고려해야 할 라이브러리들이 있다. 2025년 기준으로 가장 많이 사용되는 조합은 다음과 같다.

네비게이션

npm install @react-navigation/native @react-navigation/stack
npx expo install react-native-screens react-native-safe-area-context

React Navigation은 React Native에서 사실상의 표준 네비게이션 라이브러리다. 특히 v7부터는 새로운 아키텍처와 호환되며, 성능이 크게 개선되었다. Expo를 사용하는 경우 Expo Router가 기본적으로 세팅되어 있어 별도로 React Navigation을 설치하고 구성할 필요가 없다. 위에서 잠시 언급한 것과 같이 Expo Router는 React Navigation을 기반으로 만들어졌으며, 파일 시스템 기반의 라우팅을 제공하여 더 직관적이고 간편한 네비게이션 구조를 만들 수 있다

상태 관리

# Zustand (가장 널리 사용되는 선택)
npm install zustand

# 또는 Jotai (더 작은 규모의 상태 관리에 적합)
npm install jotai

# persist 미들웨어 (필요한 경우)
npm install @zustand/persist-async

상태 관리는 리액트 웹 개발 환경과 비슷하다. 2025년 현재 React Native를 통한 모바일 앱 개발에서는 Zustand는 널리 사용되는 상태 관리 라이브러리 중 하나다. Redux는 보일러플레이트가 많고 복잡성이 높다는 이유로 새로운 프로젝트에서는 잘 사용되지 않는다. Zustand는 간단한 API와 높은 성능, 작은 번들 사이즈를 제공하며, React Native 환경에서도 최적화되어 있다. 추가로, 서버 상태 관리를 위해 TanStack Query (구 React Query)의 사용이 증가하고 있다.

더 작은 규모의 상태 관리가 필요한 경우 Jotai를 고려할 수 있으며, 매우 간단한 상태 관리의 경우 리액트의 Context API로도 충분할 수 있다. 상태 유지가 필요한 경우 Zustand의 persist 미들웨어를 사용하면 앱을 재시작해도 상태를 유지할 수 있다.

스타일링

React Native에서는 여러 가지 스타일링 방식을 사용할 수 있다. 이전에 경험했을 때는 기본 제공되는 StyleSheet와 styled-components를 사용했었지만, 요즘 웹 개발 트렌드와 일치하게 NativeWind를 통해 Tailwind CSS도 지원되어 트렌드로 자리 잡아가고 있다. 나는 요즘 웹에서도 Tailwind CSS를 주로 사용하고 있기 때문에 NativeWind를 사용하기로 했다.

Nativewind (2025년 현재 가장 추천되는 방식)

# Nativewind 설치
npm install nativewind
npm install -D tailwindcss

# tailwind.config.js 생성
npx tailwindcss init

// 사용 예시
export function MyComponent() {
  return (
    <View className="flex-1 items-center justify-center">
      <Text className="text-xl font-bold">Hello, Nativewind!Text>
    View>
  );
}

2025년 기준으로 Nativewind가 가장 추천되는 스타일링 방식이다. 그 이유는 다음과 같다.

웹 개발자에게 친숙한 Tailwind CSS 문법 사용 가능
컴파일 타임에 최적화되어 런타임 성능 영향 없음
다크 모드 등 테마 관리가 용이
반응형 디자인 구현이 쉬움
TypeScript와의 완벽한 통합

기본 제공되는 StyleSheet API는 간단한 스타일링에 적합하며, styled-components는 동적 스타일링이 많이 필요한 경우에 고려할 수 있다. 하지만 대부분의 경우 NativeWind를 사용하는 것이 생산성과 유지보수 측면에서 가장 좋은 선택이 될 것으로 생각한다. 하지만 스타일링 방식은 개인의 취향이 많이 반영되는 영역이기도 하므로 각자 선호하는 방식을 사용하는 것이 좋다.

결론

2025년 현재 React Native는 새로운 아키텍처와 Expo의 발전으로 더욱 성숙한 개발 환경을 제공하고 있다. 특히 Expo를 활용하면 웹 개발자도 쉽게 앱 개발을 시작할 수 있으며, 개발부터 배포까지 효율적으로 진행할 수 있다. 실제로 Instagram, Discord, Shopify와 같은 대규모 서비스들이 React Native를 성공적으로 도입하여 사용하고 있으며, 특히 Expo를 활용한 개발 사례도 늘어나고 있다.

물론 React Native가 완벽한 솔루션은 아니다. 복잡한 애니메이션이나 고성능이 요구되는 기능 구현에서는 여전히 네이티브 개발 대비 제약이 있을 수 있고, 앱 크기가 더 커질 수 있다는 단점도 존재한다. 하지만 대부분의 일반적인 앱 개발 시나리오에서는 충분한 성능과 개발 생산성을 제공하며, 특히 웹 개발 경험이 있는 개발자에게는 매력적인 선택지가 될 수 있다.

올해 RN 개발을 해보면서 느끼거나 새로 배우는 것들도 정리해 가려고 하는데, 사이드 프로젝트를 진행하며 겪는 어려움이나 고민 등 유의미한 과정을 남길 수 있다면 좋을 것 같다.

참고할만한 리소스

React Native 공식 문서
Expo 공식 문서
React Native 새 아키텍처 마이그레이션 가이드
Awesome React Native - RN 관련 유용한 라이브러리 및 도구 모음
React Native 커뮤니티

전적으로 제 이해의 기준으로 작성했기 때문에 잘못된 내용이 있을 수 있습니다. 제가 잘못 알고 있는 내용이 있다면 댓글로 남겨주시면 확인하도록 하겠습니다!

Written by@[Ykss]

고이게 두지 않고 흘려보내는 개발자가 되자.

GitHub Instagram LinkedIn

[출처] https://ykss.netlify.app/devlog/start_with_RN/

[no code 게임개발] PlayMaker 요약

졸리운_곰 — Wed, 05 Mar 2025 03:18:58 +0900

[no code 게임개발] PlayMaker 요약

PlayMaker 의 시작은 GameObject 에 PlayMakerFSM 컴포넌트를 추가하는 것이다. 인스펙터에서 직접 추가해도 되고 PlayMaker Editor 창을 이용해도 된다.

GameObject 에 추가된 PlayMakerFSM 컴포넌트가 바로 하나의 FSM 객체가 된다. 같은 게임 오브젝트에 여러 PlayMakerFSM 컴포넌트를 추가하는 것으로 여러 FSM 객체를 만들 수 있다.

PlayMaker Editor 창에서 하나의 FSM 을 편집할 수 있다. FSM 은 반드시 하나의 Start State 를 가지며 위 그림처럼 "START" 가 연결되어 있다. 또한 단 하나의 State 만이 FSM 에서의 Active State 가 될 수 있다. PlayMakerFSM 컴포넌트가 enable 되었을 때 Start State 가 Active 된다.

State 는 FSM 에서 하나의 상태를 표현하는 객체이며 여러 Action, Transition 들로 구성된다.

Action 은 State 에서 수행할 하나의 작업을 표현하는 객체이며 게임 오브젝트의 이동, 회전에서부터 수많은 Action 들이 기본적으로 제공된다. 또한 직접 구현할 수도 있다. State 의 Action 들은 에디터에서 배치한 순서대로 수행된다.

Transition 은 State 에서 다른 State 로의 전이를 표현하는 객체이며 Transition 에 지정된 Event 가 발생했을 때 현재 State 는 비활성화되고 연결된 State 가 활성화된다.

Event 는 MOUSE DOWN 과 같은 PlayMaker 에서 제공하는 것들이 있고 사용자가 직접 추가할 수도 있다. 가장 자주 사용하는 Event 로 State 의 모든 Action 들이 수행을 종료했을 때 발생하는 FINISHED Event 가 있다.

Variable 은 FSM 내에서 하나의 변수를 표현하는 객체이다. 따라서 특정 Action 의 결과를 Variable 에 저장해두고 다른 Action 에서 이를 사용할 수 있다. 또한 PlayMakerFSM 이 아닌 다른 컴포넌트에서도 이 객체를 참조하여 값을 얻거나 변경할 수 있다.

Global Variable 은 모든 FSM 들이 접근할 수 있다.

출처: https://cacodemon.tistory.com/entry/PlayMaker-요약 [카코데몬의 잡동사니:티스토리]

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (4) DSE 를 이용해 이벤트 만들기 (2) : 미연시 만들기

졸리운_곰 — Fri, 21 Feb 2025 20:55:35 +0900

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (4) DSE 를 이용해 이벤트 만들기 (2) : 미연시 만들기

event.어쩌구() 함수 이용하기

이제 특별한 형태로 & 특별한 조건에서 발생하는 이벤트를 만들어보도록 합시다.

event.once()

* 스트레스가 일정 수치에 도달하면, 좀 쉬어가면서 하라는 식의 안내 이벤트가 튀어나오도록 해봅시다.

* 이 이벤트는 한 번만 나타나면 충분할 겁니다.

* 일단은 스트레스가 5 이상이 되었을 때 이벤트가 등장해야겠고.. 이벤트가 한 번만 나타나도록 하는 조건은..

* event.once() 함수를 사용하면 됩니다. event.once()는 항상 참값을 반환하다가, event.once()가 적힌 이벤트가 실행되고 나면 그 이벤트에 적인 event.once() 는 거짓값을 반환하기 때문에, 한 번만 나타나면 이벤트의 조건으로 사용하면 좋습니다.

init: event('rest_notice', 'stress >=5 ', event.once(), priority = 90 ) label rest_notice: '아..... 졸려' '과도하게 경기 준비를 했더니 몸이 피로해졌나보다. 쉬어가면서 해야지' return

event.solo()

* 정신력이 3 미만인 상태에서 휴식 중에 TV를 보다, 우연히 라이벌의 경기를 보고 자극을 받았다.. 는 내용의 이벤트를 만들어보겠습니다.

* 이 이벤트는 휴식 스케쥴이 실행됐을 때, 일반 휴식 이벤트 (rest) 를 대신해서 실행되도록 만들겠습니다.

* 일단 priority 값을 낮게 줘서 이 이벤트의 실행 조건이 먼저 판별되게 한 다음,

* 'act == "휴식" and mental < 3' 이라는 조건에서 실행되도록 적습니다.

event('steampack', 'act == "휴식" and mental < 3', priority = 90)
* 이걸로 자극 이벤트의 설정은 완료입니다. 손 볼 곳은 rest 이벤트쪽입니다.
event('rest', 'act == "휴식"', priority= 100 , event.solo() )
이 event.solo()를 사용한 이벤트는, 이벤트 실행 조건을 충족하였으며 event.solo()를 사용한 이벤트보다 우선도가 높은, 즉, priority 값이 작은 이벤트가 없는 경우에만 실행됩니다. 예제를 이용해서 설명을 하자면 다음과 같습니다.

자극 이벤트는 휴식 이벤트와 실행 조건이 같지만, 자극 이벤트 쪽이 우선도가 높으므로, 자극 이벤트가 실행될 때는 휴식 이벤트가 실행되지 않습니다.

event.solo() 함수는 비슷한 상황에서 실행되는 이벤트 중에 우선도가 높은 이벤트가 있다면 실행되지 말아야 할 이벤트에 사용하면 좋습니다.

event.only()

* 이제 주인공이 스트레스가 높아 병에 걸리는 이벤트를 만들어봅시다.

* 일단 우선도를 가장 높게, 그러니까 priority = 0 값을 가장 낮게 줍니다.

* 그리고 스트레스가 3 * 플레이 일 수보다 높으면 병 이벤트를 발생시키도록 하겠습니다(기존에 적었던 병 상태 발병 공식은 무시하기로 했습니다.. -.-;).

* 남은 건 이 이벤트보다 우선도가 낮은(priority 값이 높은) 다른 이벤트는 모두 발생하지 않도록 설정하는 겁니다. event.only()를 적어줍시다.

event('sick', 'stress> 3*day', event.only(), priority = 0)

오로지 이 상황에서는 이 이벤트만 튀어나와야 한다! 하는 이벤트에 사용해주도록 합시다.

event.happened(이벤트) 와 event.depends(이벤트) 그리고 call events_end_day

* 이번에 만들어볼 이벤트는 릴뤡스 입니다. 이 이벤트는 병 걸린 이벤트를 반드시 봐야지만 다음날 발생하도록 만들어줘야 합니다.
event.depends(*이벤트) 함수를 사용하면 이것을 가능하게 할 수 있습니다.

event('relax', event.depends('sick'))
그 전에, 이 event.depends()를 사용하면서 특정 이벤트가 하루 전에 발생했다는 걸 인식시키려면 하루 단위의 스케쥴이 모두 완료된 지점에 다음과 같은 명령어를 적어줘야 합니다.

label afternoon: $ act = afternoon call events_run_period call events_end_day $ day +=1 if day == 8: #.......

call events_end_day 를 사용하면, 예를 들면 첫째 날에 a 라는 이벤트가 발생한 경우 events_excuted_yesterday 라는 변수에 이 이벤트가 실행되었다는 것을 저장하고, 둘째날 진행으로 넘어가게 됩니다.

그러니까 event.depends(*이벤트) 를 사용하게 되면, 이 함수는 이벤트에 적은 이벤트를 events_excuted_yesterday 에서 검색할 수 있게 되는 겁니다. 이벤트를 발견했다면 event.denpends()가 사용된 이벤트를 실행시키게 됩니다.

event.happened(*이벤트) event.depends()와 비슷하지만 이는 게임 중에 어느 때라도 이벤트가 발생했다면 event.happened() 가 적힌 이벤트를 실행한다는 것이 다른 점입니다.

event.random(확률)

* 일정한 확률에 따라 이벤트를 발생시킬 수 있도록 해주는 함수입니다. 입력하는 값은 부동소수점값(소수점 찍힌 숫자)이어야 합니다. 어려운 점은 없다고 생각해서 자세한 예는 생략하겠습니다.

* 이 함수를 이용하면 능력치값을 계산해서 일반 스탯 획득의 성공/실패를 가를 수 있을 겁니다. 프린세스 메이커에서 능력치에 따라 알바/학습의 성공/실패가 갈라졌었죠. 그런 걸 얘기하는 겁니다.

event.choose_one(group, group_count = 1)

* 이번에는 마인드 컨트롤을 하면 등장하는 이벤트 두 가지를 만들어보겠습니다.

* 한 이벤트는 보통의 이벤트이지만, 낮은 확률로 마인드 컨트롤을 하다가 잠을 자버리는 -0- 이벤트가 발생하도록 만들겁니다.

* 일단 새 이벤트를 하나 더 만듭니다.

* 그 다음 이 두 이벤트를 하나의 그룹으로 묶어줍니다. 이 그룹으로 묶는 작업을 위해 event.choose_one()을 사용합시다.

이렇게 하면 두 이벤트가 "마컨" 이라는 하나의 그룹으로 묶이게 된 겁니다. 이제 마인드 컨트롤 스케쥴을 실행할 때마다 자동으로 저 두 이벤트 중 하나가 선택되어 실행될 겁니다.

마인드 컨트롤을 하다가 낮잠을 자는 이벤트는 확률이 일반 마컨 스케쥴보다 낮아야 합니다. group_count 로 잠 자는 이벤트에 낮은 숫자를, 일반 이벤트에는 높은 숫자를 지정해줍시다.

(위의 스크립트에서는 확인용으로 m_control_sleep 이벤트의 group_count 를 높게 줬습니다)

group_count 는 큰 값이 확률이 높고 적은 값이 확률이 적습니다.

이전 글에서도 적었지만, event()에는 위에 열거한 event.어쩌구 들을 전부 혼합해서 사용할 수도 있습니다. 이벤트의 성격에 맞게 각각 조합해서 사용한다면 보다 복잡한 조건에서 발생하는 이벤트도 만들 수 있습니다.

끝

네 끝입니다..) 렌파이로 육성 시뮬레이션을 만들 때 필요한 지식은 설명해드린 것이 전부이고, 앞으론 알게 된 기능을 응용해 만드는 일만 남았습니다. 모쪼록 재미나게 게임 만드시길.

출처: https://askance.tistory.com/45 [백안시의 공방 - 소설형 게임 제작실:티스토리]

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (3) DSE 를 이용해 이벤트 만들기 (1)

졸리운_곰 — Tue, 18 Feb 2025 00:24:50 +0900

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (3) DSE 를 이용해 이벤트 만들기 (1)

이제 연습 게임에 이벤트를 채워봅시다. event_dispatcher.rpy 를 본격적으로 사용할 시간입니다.


그 전에 DSE 엔진의 events.rpy 파일을 확인해서, 이벤트는 어떤 식으로 스크립트를 써야 만들어지는지 살펴봅시다.#events.rpy 의 스크립트 일부
init:
    $ event("class", "act == 'class'", event.only(), priority=200)
    $ event("class_bad", "act == 'class'", priority=210)
    $ event("cut1", "act == 'cut'", event.choose_one('cut'), priority=200)
    $ event("cut2", "act == 'cut'", event.choose_one('cut'), priority=200)

event() 해석

이벤트를 만드려면 파이썬 블록에 event(어쩌구) 라고 적어야 합니다. 어쩌구에 있는 내용을 간단히 해석하자면 다음과 같습니다.

event('레이블 이름', priority = 우선도, 나머지는 전부 이벤트 실행 조건)

- 레이블 이름

이벤트 실행 조건이 참일 때 불러올 레이블 블럭의 이름입니다.

- 이벤트 실행 조건

말 그대로입니다. 파이썬 표현식을 문자열 형태로 적거나 (ex 'act == "class"'), 아니면 위의 예제에서 보이는 event.어쩌구 와 같은, DSE 를 이용할 때만 사용 가능한 함수를 적어야 합니다. 이 함수에 대해서는 다음 글에서 다시 설명하겠습니다.

어쨌든 이 실행 조건들 간에는 파이썬 표현식에서 사용할 수 있는 and 나 or, not 같은 연산자를 사용할 수 있습니다.
event('marry', event.depends('engage_1') or event.depends('engage_2')) 나,
event('sub_lesson', event.depends('get_Fail') and 'intelligence == 0') 처럼 쓸 수 있다는 얘기입니다.

- priority

단어 뜻 그대로 해당 이벤트의 우선도를 나타냅니다. 기본값은 100 이며 이 값이 낮을 수록 해당 이벤트의 실행 조건이 먼저 고려됩니다. 여기서 조심하실 게 하나 있습니다. 만일 이벤트 실행 조건이 똑같은 2 개의 이벤트가 있다고 가정했을 때, 한 쪽의 priority 가 10 이고 다른 이벤트는 priority 가 200 이라고 해서 우선도가 더 높은 쪽의 이벤트가 실행이 안 되는 것이 아닙니다. priority 가 1000짜리라도 실행 조건만 충족되면 발생합니다. 아까도 적었지만, priority 는 해당 이벤트의 실행 조건을 먼저 따질 때 사용하는 수치인 것이지, 우선도가 낮은 다른 이벤트를 배제하고 실행하지 않는다는 의미가 아닙니다.

* 아까 이벤트 실행 조건 설명할 때 넘어갔던 event.어쩌구 함수들..은 직접 이벤트를 만들면서 설명드리겠습니다.

이벤트 만들기

프로젝트/game 폴더에 event_dispatcher.rpy 들어있는 것 확인하시고, 이제 이벤트를 만들어보도록 합시다.

* 이벤트에는 여러가지 내용이 들어가니까 관리하기 쉽게 스크립트 파일을 새로 만듭시다. 전 events.rpy 라는 새 파일을 만들었습니다.

* 이제 어떤 이벤트가 필요할지 생각해봅시다.

* 일정 조건을 달성하면 뿅 하고 등장하는 그런 것 외에도, 일반적인 상황에서 발생하는 스케쥴 실행 화면도 이벤트로 칩시다. 여러 게임에서는 기본 스케쥴을 실행할 때도 특정 조건에 따라 성공/실패 여부가 갈려서 스탯을 획득하거나 하니까요(예제 게임에선 그런 식으로 만들지는 않을 겁니다만 참고하시라는 의미에서 적어둡니다).

* 기초 설정 잡았을 때, 스케쥴 종류가 휴식, 전략 구상, 마인드 컨트롤, 연습 이렇게 네 가지 있었습니다.

휴식: 스트레스 4 감소, 정신력 1 증가,
연습: 상황 판단력 1 증가, 반응 속도 3 증가, 스트레스 3 증가.
전략 구상: 상황 판단력 2 증가, 정신력 1 증가, 스트레스 2 증가
마인드 컨트롤: 정신력 2 증가

(스트레스는 stress, 정신력은 mental, 상황 판단력은 judge, 반응 속도는 react 라는 변수명을 정해주었죠)

* 일단 각 스케쥴이 실행되면, 발생할 이벤트의 내용이 적인 레이블을 만들어줍니다. 이벤트로 쓰이는 각 레이블은 호출(call)되는 형식이기 때문에 레이블마다 끝에 return 을 적어주어서 원래 진행 흐름으로 돌아갈 수 있도록 해야 합니다. 진행상황을 확인할 수 있도록 한마디도 써줍시다.

label rest: $ stress = max(stress - 4, 0) $ mental += 1 '얌전히 쉬었다.' return label practice: $ judge += 1 $ react += 3 $ stress += 3 '연습했다' return label strategy: $ judge += 2 $ mental += 1 $ stress += 2 '전략을 구상했다' return label m_control: $ mental += 2 '마인드 컨트롤을 했다' return
# 여기서 stress = max(stress -4, 0) 는
stress 에서 - 4 하되 만일 이 결과값이 0보다 작으면 0을 stress 변수에 배정한단 의미입니다. 스탯 수치가 0 이하로 내려가지 않도록 하기 위해 사용한 함수입니다.

* 그리고 event() 함수를 이용해서 각 레이블이 실행될 수 있도록 이벤트들을 만들어줍니다. 우선도는 적지 않았으니, 기본값인 100이 적용될 겁니다.

init python: event('rest') event('practice') event('strategy') event('m_control')
이제 실행 조건을 적을 차례입니다. 사용자가 정한 스케쥴만 제 때 실행되도록 조건을...

어떻게 적어야 할까여....-.-

지금 스케쥴이

$ morning = '휴식'
$ free = '마인드 컨트롤'

같은 식으로 저장되어 있고 스크립트는

label morning:
label free:
label afternoon:

이런 식으로 작성되어있죠.

그럼 변수를 하나 만들어서 그 변수에 morning, free, afternoon 에 저장된 값을 옮기고, 각 레이블 끝마다 이벤트를 불러오도록 하면 되겠네요.

급하게 act 라는 변수를 하나 만듭시다.

act = ''

그리고 각 레이블에마다 act 를 적고 해당 시기에 실행할 스케쥴의 정보를 또 저장하도록 해줍니다.

label morning:
$ act = morning

이제 이벤트를 호출할 수 있도록 명령어를 하나 더 적어줍니다.
label morning: $ act = morning call events_run_period # 나머지 라벨도 같은 식으로..
call events_run_period 를 사용하면 event() 로 만들어진 이벤트들 중에서 현재 조건에 맞는 이벤트를 실행시킬겁니다.
이제 다시 events.rpy 로 돌아가서 event() 함수들을 마저 작성합시다.

init python: event('rest', 'act == "휴식"') event('practice', 'act =="연습"') event('strategy', 'act == "전략 구상"') event('m_control', 'act == "마인드 컨트롤"')
여기까지 완성한 게임의 스크립트를 확인하시고, 게임을 테스트해보시면서 잘못된 부분이 있나 확인합시다.

저는 7일째를 판정하는 if 문이랑 day 변수를 잘못 써서 6일 째에 게임이 끝나게 되더군요.. 그 부분을 수정했습니다.

label afternoon: $ act = afternoon call events_run_period $ day +=1 if day == 8: jump ending else: jump schedule_set

다음 글은 특별한 조건에서 실행되는 이벤트를 만드는 방법입니다.

출처: https://askance.tistory.com/44 [백안시의 공방 - 소설형 게임 제작실:티스토리]

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (2) 스크린 언어로 스케쥴 화면 만들기

졸리운_곰 — Mon, 17 Feb 2025 00:53:05 +0900

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (2) 스크린 언어로 스케쥴 화면 만들기

필요한 게 뭘까


구조는 잡았으니 이제 다음으로 필요한 게 뭔지 생각해봅시다. 렌파이의 기본 UI를 (귀찮으므로) 그냥 사용하기로 했다 치면, 그 외에 필요한 건 아래와 같습니다.



- 스탯을 표시하는 화면

- 플레이어가 스케쥴을 정할 수있게 해주는 화면

- 플레이어가 정한 스케쥴을 확인할 수 있게 해주는 화면

스탯창


일단 스탯창은 쉽게 만들 수 있습니다. 스크린 언어를 이용해서 만들어보도록 합시다.init:
    screen stat: # 스탯창
        frame:
            align (0.0 , 0.7)  # 스탯창의 위치
            grid 4 2:  # text 정렬용 박스. 4열 2행짜리 정렬용 박스를 만든다.
                text '정신력'
                text '판단력'
                text '민첩성'
                text '스트레스'
                
                text str(mental)  # 해당 변수의 수치 표시.
                text str(judge)
                text str(react)
                text str(stress)



text 가 문자열만을 받아서 화면에 표시하기 때문에, str(변수)로  변수에 저장된 정수값을 문자열로 바꾸는 역할을 해 주는 겁니다('0' 과 0 은 전혀 다른 종류의 값으로, 각각 문자열과 정수값입니다).



종전에 ui 문에서 그랬던 것처럼

text ('%s' %mental) 

이라고 적어도 됩니다만 저는 % 기호를 적는 게 귀찮아서; str 함수를 이용했습니다.

스케쥴 설정 화면


그 다음은 스케쥴 설정 화면입니다. 제가 만드려는 방식은

이런 식입니다. 렌파이 튜토리얼 게임에서 ui 항목에 나와있는 예제랑 비슷한 방식입니다. 그림을 이해하기 힘드신 분들은 튜토리얼 게임에서 작동을 확인해보세요.

튜토리얼 게임에 나온 스케쥴러는, 스크립트를 확인해보시면 아시겠지만 ui 문과 파이톰이 자작한 함수 몇가지로 만들어졌습니다. 저는 스크린 언어로 한번 작성해보도록 하겠습니다.

우선 오전, 자유, 오후 시간에 어떤 스케쥴이 정해졌는지 이에 관한 정보를 담은 변수를 하나씩 만들어줍시다. 초기값은 무조건 휴식이 되도록 줬습니다.

morning = free = afternoon = '휴식'

그럼 이제 위의 그림에서 1 이라고 표시한 UI 먼저 만들어봅시다. 감이 안 오더라도 그냥 막히는 데까지만 적으면 됩니다.

screen planner: # 스크린 문은 init 블록 안에서 작성하는 게 좋습니다. vbox: # 정렬을 위한 vbox align (.5, .5) # vbox 의 위치 grid 3 2: # 정렬을 위한 3x2 의 grid text '오전 연습 시간' #해당 스케쥴을 실행할 시기를 글로 표시. text '자유 시간' text '오후 연습 시간' textbutton morning # morning 변수에 저장된 글자가 표시될 텍스트버튼 textbutton free # 같은식 textbutton afternoon textbutton '완료' action Return() align (.5, .5) # 스케쥴을 완료했을 때 누르면 됨.

이제 이 화면에 있는 텍스트 버튼을 눌렀을 때, 그 시기에 실행할 스케쥴을 정하는 스케쥴 선택지를 표시하도록 해야 합니다(그림에서 2라고 표시한 부분). 이것도 막히는 데까지 적어봅시다.

screen schedule: frame: # 구색맞추기용 frame align (.5, .8) # frame 의 위치 vbox: # 정렬용 vbox text '실행할 스케쥴을 선택하세요' # 안내 문구 textbutton '휴식' textbutton '연습' textbutton '전략 구상' textbutton '마인드 컨트롤'

이제 그림에서 1이라고 표시한.. 그러니까 planner 스크린 문으로 다시 돌아가서, 각 텍스트버튼을 클릭했을 때 schedule 스크린이 표시되도록 만들어줍니다.

screen planner: # 스크린 문은 init 블록 안에서 작성하는 게 좋습니다. vbox: # 정렬을 위한 vbox align (.5, .5) # vbox 의 위치 grid 3 2: # 정렬을 위한 3x2 의 grid text '오전 연습 시간' #해당 스케쥴을 실행할 시기를 글로 표시. text '자유 시간' text '오후 연습 시간' textbutton morning action Show('schedule') textbutton free action Show('schedule') textbutton afternoon action Show('schedule') textbutton '완료' action Return() align (.5, .5) # 스케쥴을 완료했을 때 누르면 됨.

한층 자연스러워졌군요.. 는 구라고. 이쯤에서는 의문점을 가지셔야 합니다.

"세 개의 버튼이 모두 schedule 이라는 똑같은 스크린을 표시하는데, 어떻게 스케쥴 정보를 morning, free, afternoon 변수에 따로따로 저장을 할 수 있지?"

라고요.

다시 schedule 스크린의 스크립트를 살펴봅시다. '휴식', '연습' ... 등의 텍스트버튼이 제 구실을 하도록 action 속성을 입력해줘야할 필요성이 느껴집니다. Return(value) 액션은 그냥 텍스트버튼을 클릭하면 _return 이라는 변수에 value 를 저장하기 때문에 이 경우에는 그닥 적절해보이지는 않습니다. 우리가 지정한 변수에 특정한 값을 설정하도록 하는 액션으로는 SetVariable 이 더 적당합니다.

SetVariable(variable, value)
value 를 variable 에 설정한다.

여기서 주의할 점은 variable 자리에 변수 이름이 적힌 문자열이 와야 한다는 겁니다. 이 값을 어떻게 줘야 할지 의문입니다. 어떤 변수에 "morning" 이나 "free" 같은 문자열이 planner의 텍스트 버튼들을 누를 때마다 바뀌어서 저장된다면 가능할 것같긴 합니다. 임의로 period 라는 변수와 함께 SetVariable 을 각 텍스트버튼에 적어줍시다.

screen schedule: # ... textbutton '휴식' action SetVariable (period, '휴식') # 다른 버튼들도 비슷한 식으로..

흠. 그렇다면, planner 스크린에서 오전/자유/오후 텍스트버튼을 클릭할 때마다 각 시기에 해당하는 변수를, schedule 스크린으로 넘겨줘서, SetVariable 액션에 적을 variable 이 각 상황에 따라 바뀌도록 할 수 있다면 되겠군요. 알기 쉽게 그림으로 설명하자면 이런 느낌입니다.

쨌든 쉽게 설명하자면, schedule 이라는 스크린에서 사용할 변수를 planner에서 지정해주어야 한다는 이야기입니다.

다행이도 이건 스크린 문에서 간단히 해결할 수 있습니다(그렇지 않다면 제가 이와 관련한 글을 쓰지도 않았을 겁니다^*^)

아까 planner 스크린에 텍스트버튼마다 Show('schedule')이라고 적었죠. 그 옆에 약간만 뭔가를 추가해주면 됩니다.

이렇게 하면 planner 에서 버튼을 누를 때마다 period 변수의 값이 따로 지정되어서 schedule 스크린을 불러오고, schedule 의 SetVariable 에 적힌 period 에는 해당 문자열값이 대체되기 때문에, 제대로 작동이 되는 겁니다.

자 이제 완성.. 이면 좋겠지만 문제가 남아있습니다. schedule 스크린을 불러와서 텍스트 버튼을 클릭해줬는데, schedule 스크린이 사라지질 않아서 약간 거치적거립니다. SetVariable 액션이 실행되고 나면 schedule 스크린이 사라지도록 해야겠습니다.

예전에도 적었지만, 스크린 언어의 action 속성에는 액션의 리스트를 입력할 수도 있습니다. 이 때는 적힌 순서대로 해당 액션이 실행됩니다.

(위치나 모양은 좀 엉성하지만) 이제 나름의 스케쥴 설정 화면이 완성되었을 겁니다(완성된 스크립트는 각자 알맞게 만들어 보세요). 스탯창과 함께 이 화면을 게임에서 띄우면 되겠군요. 지난번에 적었던 기초 스크립트에 schedule_set 라벨이 있었는데, 그 라벨 안에 적절히 호출하면 되겠습니다.

스탯창은 그냥 화면상에 표시해야하는 거니 show screen 으로, 스케쥴 화면은 인터렉션이 필요하므로 call screen 으로 띄웁시다. show screen의 경우는 나중에 hide screen 으로 해당 스크린을 숨길 수 있습니다.출처: https://askance.tistory.com/43 [백안시의 공방 - 소설형 게임 제작실:티스토리]

출처: https://askance.tistory.com/43 [백안시의 공방 - 소설형 게임 제작실:티스토리]

[ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (1) 기초 스크립트 작성

졸리운_곰 — Mon, 17 Feb 2025 00:48:14 +0900

[ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (1) 기초 스크립트 작성

준비물

- 렌파이
- DSE (여기서 다운로드 가능)

dse2-20080829.zip dse2-20080829.zip

(혹시라도 자료를 구할 수 없을 경우를 대비해 이곳에도 업로드합니다.)

필요한 파일은 event_dispatcher.rpy / events.rpy 뿐입니다. 그것만 프로젝트/game 폴더 안에 넣으세요. events.rpy 파일은 예제가 들어있는 파일이니 확인 한 번 하면 나중에 지워도 됩니다.

- 게임에 쓸 그림

원하시는 분에 한해서. 전 귀찮아서 글로만 작성하렵니다

- 지식

블로그 우측의 비주얼노벨-텍스트어드벤처 카테고리 글 전부 / 모양내기 - Character의 이용, 대사꾸미기 / 고급 기능 카테고리의 스크린 언어 글 전부에 관해서는 반드시 알아야 합니다.

예제 게임 기초 설정

제목: 프로게이머 키우기
게임 목적: 1주일 동안 빡세게 연습해서 스타크래프트 메이저 대회 결승전에서 우승하기!
게임 방식: 프린세스 메이커와 비슷한 방식. 스케쥴은 하루 단위로 짠다.

재미로 편하게 설정한 것들이니 위의 내용이 안 내키시면 다른 거로 바꾸셔도 됩니다.
오타쿠 키우기라던가.. 뭐 어차피 강의에서 중요한 건 DSE 에 대한 설명이랑 스크립트 구조 정도니까여.

세부사항 정하기

그럼, 아래는 게임에 대한 세부(라고 부르기는 약간 창피한..) 설정입니다.
강의는 아래에 적힌 내용에 따라서 작성되니 쭉 한번 훑어보세요.

- 게임 진행 기간
7일
(토요일부터 시작, 그 다음 주 토요일이 결승전-엔딩 분기)
(토, 일, 월, 화, 수, 목, 금 )

- 스케쥴
종류: 휴식. 연습. 전략 구상. 마인드 컨트롤.
기간: 오전 연습시간, 자유시간, 오후 연습시간

휴식: 스트레스 4 감소, 정신력 1 증가,
연습: 상황 판단력 1 증가, 반응 속도 3 증가, 스트레스 3 증가.
전략 구상: 상황 판단력 2 증가, 정신력 1 증가, 스트레스 2 증가
마인드 컨트롤: 정신력 2 증가,

- 스탯
스트레스 - 일정 수치 이상이 되면 병 상태가 된다.
정신력 - 말 그대로. 불굴의 의지, 기.
상황판단력 - 수치가 높을 수록 상황판단이 정확하다
민첩성 - 수치가 높을 수록 판단을 수행하는 속도가 증가한다
체력 - 값은 20으로 고정

* 체력 제외한 모든 스탯의 초기값은 0
* 스트레스가 (체력 + (정신력/2)) / 2 보다 크면 다음 날 병 상태 판정. 하루는 무조건 휴식.
* 스탯 옆에 적힌 부연 설명에 따라 특정 스탯의 수치가 높을 경우 엔딩 대사에 변화를 준다.

- 엔딩
* 우승 / 준우승
* 상황 판단력과 민첩성, 정신력 스탯이 10 이상이고 (정신력 + 상황판단력 + 민첩성) - 스트레스가 25 보다 크면 우승.
* 만일 병 상태로 결승전에 출전하면 무조건 준우승 엔딩.
* 플레이어 이름이 홍진호라면 준우승 엔딩밖에 못 본다.

- 기타
* 연습용 예제게임이다보니 필요한 스탯은 최소화했습니다.
* 스탯에 관한 모든 임시로 정한 것으로 추후 변동해야할듯요.

그러니까 이 게임은 하루에 3 개의 스케쥴을 실행하며, 이것이 일곱 번 반복되는 동안 얻은 스탯에 따라서 엔딩이 갈라지게 됩니다. 게임 흐름을 알아보기 쉽게 그려보면 다음과 같습니다.

많은 부분이 생략되긴 했지만 게임 진행은 대략 이런 식으로 됩니다. 이 순서도에 따라 스크립트를 작성해봅시다. 첨부터 완벽하게 쓰려고 하지 마시고 그냥 생각을 정리하는 차원에서 적어보기로 합니다.

스크립트 대충 적기

게임에서 쓰일 변수로는 우선 스탯에 관한 것들이 있을 겁니다. 적당한 영문명으로 알아보기 쉽게 적어줍시다.

init python:
    stress = mental = judge = react = 0
    hp = 20

그리고 게임 시작 버튼을 누르면 실행될 스타트 라벨을 적어놓습니다.

label start:

그 다음은 플레이어가 스케쥴을 설정할 때 실행될 라벨을 적습니다.

label schedule_set:

이제 schedule_set 라벨에서 설정한 스케쥴이 실행될 라벨을 적습니다. 하루 중 오전/자유/오후 시간에 각각 스케쥴을 설정했으니 이를 실행할 라벨도 각기 따로 만들어줍시다.

label morning:
label free:
label afternoon:

오후 스케쥴까지 실행했으면 7일이 모두 지났는지 확인해야하며, 7일이 경과했다면 엔딩으로, 아니라면 다시 스케쥴 설정 화면으로 돌아가야 합니다. if 문으로 간단하게 처리합시다.

if day == 7:
    jump ending
else:
    jump schedule_set

이렇게 적고 보니 init 블록에 day 변수도 넣어야 할 것 같네요. 초기값은 첫째날을 뜻하는 1로 적어줍니다.

day = 1

다음은 if 문에서 썼던 ending 라벨을 적도록 합시다. 이 라벨에서는 조건에 따라 엔딩이 굿/배드로 갈려야 합니다. 이것도 if문으로 해결해줍시다.

label ending:
    if 굳엔딩 조건 == True :
        # 굳 엔딩 내용
    else:
        # 배드 엔딩 내용

예제 게임은 내용이 짧아서 그냥 ending 라벨에 모든 엔딩을 적습니다만, 엔딩에서 표시할 내용이 길다면 여기서도 각각 다른 라벨에 적어주는게 좋을 겁니다.

여기까지 적었으면 스크립트가 다음과 같은 식으로 적혀있을 겁니다.

약소하게나마 적힌 스크립트를 보니 벌써 반은 완성된 기분이네요! 물론 기분만 그런 거고 실제론 실행조차 안 됩니다. 다음 글에선 dse & 스크린 언어를 통해 게임을 좀 더 완성에 가깝게 만들어보도록 하겠습니다.

출처: https://askance.tistory.com/42 [백안시의 공방 - 소설형 게임 제작실:티스토리]

[flutter (플루터 앱 개발)] Dart와 Flutter를 ChatGPT에게 배우다.

졸리운_곰 — Mon, 03 Feb 2025 23:45:23 +0900

[flutter (플루터 앱 개발)] Dart와 Flutter를 ChatGPT에게 배우다.

[ 설치 ]

Flutter 개발을 위해서 Visual Studio Code를 사용하려면 다음과 같은 단계를 수행하면 됩니다:

Flutter SDK 설치: Flutter SDK를 설치하여 개발 환경을 구축합니다.
Visual Studio Code 확장 플러그인 설치: Visual Studio Code에서 Flutter 개발을 위해서 필요한 확장 플러그인을 설치합니다. (Flutter, Dart 확장 플러그인)
프로젝트 생성: Visual Studio Code에서 새 프로젝트를 생성하고, Flutter 구조를 유지하며 개발을 시작합니다.
코딩 및 디버깅: Visual Studio Code에서 Flutter 앱을 개발하고, 디버깅 도구를 사용하여 코드를 검증합니다.

macOS에서 Flutter SDK 설치하는 방법은 다음과 같습니다:

Flutter 공식 웹사이트에서 Flutter SDK 다운로드: https://flutter.dev/docs/get-started/install/macos
다운로드한 파일을 압축 해제: 다운로드한 .zip 파일을 압축 해제합니다.
Terminal에서 Flutter 디렉토리로 이동: Terminal에서 Flutter SDK 디렉토리로 이동합니다.
Flutter SDK 경로 추가: 터미널에서 export PATH="$PATH:[Flutter SDK 경로]/flutter/bin" 명령어를 입력하여 Flutter SDK 경로를 PATH에 추가합니다.
Flutter CLI 설치 확인: 터미널에서 flutter doctor 명령어를 입력하여 Flutter CLI 설치 상태를 확인합니다.

이제 Visual Studio Code를 사용하여 Flutter 개발을 시작할 수 있습니다!

[ 변수 ]

Dart에서 변수를 사용하는 방법에 대한 예제는 다음과 같습니다:

void main() {
  // 변수 선언
  var name = 'John Doe';
  int age = 30;
  double height = 5.9;
  bool isMarried = true;

  // 변수 값 출력
  print('Name: $name');
  print('Age: $age');
  print('Height: $height');
  print('Married: $isMarried');
}

위 예제에서 var 키워드를 사용하여 변수를 선언할 수 있습니다. var 키워드를 사용하면 Dart 컴파일러가 변수의 타입을 자동으로 결정합니다. 또한 타입을 명시적으로 지정하여 변수를 선언할 수도 있습니다.

void main() {
  // 변수 선언
  String name = 'John Doe';
  int age = 30;
  double height = 5.9;
  bool isMarried = true;

  // 변수 값 출력
  print('Name: $name');
  print('Age: $age');
  print('Height: $height');
  print('Married: $isMarried');
}

위 예제에서는 타입을 명시적으로 지정하여 변수를 선언하였습니다. 이처럼 변수를 선언하면 Dart 컴파일러가 값이 해당 타입으로 결정되어야 함을 강제하게 됩니다.

[ 조건문/반복문 ]

Dart에서 조건문과 반복문을 사용하는 방법에 대한 예제는 다음과 같습니다:

void main() {
  // 조건문
  int score = 80;
  if (score >= 90) {
    print('A');
  } else if (score >= 80) {
    print('B');
  } else {
    print('C');
  }

  // 반복문
  for (int i = 0; i < 5; i++) {
    print(i);
  }

  int j = 0;
  while (j < 5) {
    print(j);
    j++;
  }
}

위 예제에서는 if 문, for 문, while 문을 사용하여 조건문과 반복문을 구현하였습니다.

if 문에서는 주어진 조건에 따라 다른 코드 블록이 실행됩니다. for 문에서는 주어진 조건에 따라 반복적으로 코드 블록이 실행됩니다. while 문에서는 주어진 조건이 참인 경우 반복적으로 코드 블록이 실행됩니다.

[ 함수 ]

Dart에서 함수를 정의하고 호출하는 방법에 대한 예제는 다음과 같습니다:

void main() {
  // 함수 정의
  int add(int a, int b) {
    return a + b;
  }

  // 함수 호출
  int result = add(3, 4);
  print(result);

  // 다른 함수에 함수를 넘기는 것
  void printResult(Function func) {
    print(func(3, 4));
  }

  printResult(add);
}

위 예제에서는 add 함수를 정의하고, 함수를 호출하여 결과를 출력하였습니다. 또한 printResult 함수에 add 함수를 넘겨서 호출하여 결과를 출력하였습니다.

[ 클래스/인터페이스 ]

Dart에서 클래스와 인터페이스의 정의 및 사용에 대한 예제는 다음과 같습니다:

// 인터페이스 정의
abstract class Shape {
  double getArea();
}

// 클래스 정의
class Circle implements Shape {
  double radius;

  Circle(this.radius);

  @override
  double getArea() {
    return 3.14 * radius * radius;
  }
}

class Rectangle implements Shape {
  double width;
  double height;

  Rectangle(this.width, this.height);

  @override
  double getArea() {
    return width * height;
  }
}

void main() {
  Shape circle = Circle(5);
  Shape rectangle = Rectangle(5, 7);

  print(circle.getArea());
  print(rectangle.getArea());
}

위 예제에서는 Shape 인터페이스를 정의하고, Circle과 Rectangle 클래스를 정의하였습니다. Circle과 Rectangle 클래스는 Shape 인터페이스를 구현(implement)하고 있습니다. getArea 메서드는 Shape 인터페이스에 정의된 추상 메서드를 구현하였습니다. main 함수에서는 Circle과 Rectangle 객체를 생성하고 getArea 메서드를 호출하여 결과를 출력하였습니다.

[ 네트워킹 ]

Flutter에서 네트워크 통신을 하는 예제는 다음과 같습니다:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Network Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Network Example'),
        ),
        body: Center(
          child: FutureBuilder(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Future<String> fetchData() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    return json.decode(response.body)['title'];
  } else {
    throw Exception('Failed to load data');
  }
}

위 예제에서는 Flutter의 http 패키지를 사용하여 https://jsonplaceholder.typicode.com/posts/1 URL로부터 JSON 데이터를 가져오고 있습니다. 이 데이터는 json.decode 함수를 사용하여 파싱하고, title 프로퍼티의 값을 화면에 출력하고 있습니다. FutureBuilder 위젯은 비동기 네트워크 요청의 결과를 기다리는 동안 CircularProgressIndicator 위젯을 표시하고, 요청이 완료되면 결과를 화면에 출력하고 있습니다.

[ 소켓통신 ]

Dart에서 소켓 통신을 구현하는 방법은 다양합니다. 다음은 Dart에서 소켓 통신을 구현하는 단순한 예제입니다:

import 'dart:io';

void main() async {
  // Create a server socket
  var server = await ServerSocket.bind('localhost', 4040);
  print('Listening for connections...');

  // Listen for incoming connections
  await for (var socket in server) {
    print('Received connection from ${socket.remoteAddress.address}:${socket.remotePort}');

    // Send data to the socket
    socket.write('Hello, client!');

    // Wait for data from the socket
    var data = await socket.transform(utf8.decoder).join();
    print('Received: $data');

    // Close the socket
    socket.close();
  }
}

그리고 다음은 클라이언트 코드입니다:

import 'dart:io';

void main() async {
  // Connect to the server socket
  var socket = await Socket.connect('localhost', 4040);
  print('Connected to the server: ${socket.remoteAddress.address}:${socket.remotePort}');

  // Send data to the socket
  socket.write('Hello, server!');

  // Wait for data from the socket
  var data = await socket.transform(utf8.decoder).join();
  print('Received: $data');

  // Close the socket
  socket.close();
}

위의 예제에서는 소켓 통신에 필요한 dart:io 라이브러리를 가져오고, 단일 연결을 구현하였습니다. 이 예제는 소켓 통신의 개념을 이해하는데 도움이 되며, 실제 애플리케이션에서 소켓 통신을 사용할 때는 더 복잡한 로직이 필요할 수 있습니다.

[ 탭 메뉴 예제 ]

Flutter에서 탭 메뉴를 구현하는 방법에는 다양한 방법이 있지만, 다음은 Flutter의 Scaffold 위젯을 이용하여 탭 메뉴를 구현하는 예제입니다:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  final List _pages = [
      Container(child: Center(child: Text('1'),),),
      Container(child: Center(child: Text('2'),),),
      Container(child: Center(child: Text('3'),),),
  ];

  void _onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
      ),
    );
  }
}

위의 예제에서는 탭 메뉴의 인덱스를 저장하는 _selectedIndex 변수와, 각 탭에 대응하는 화면을 표시할 위젯 목록 _pages 를 정의하였습니다. 그리고 _onTabTapped 메소드를 통해 탭을 클릭할 때마다 _selectedIndex 변수를 변경하여 화면을 이동하게 하였습니다.

BottomNavigationBar 위젯에서는 현재 선택된 탭의 인덱스를 나타내는 currentIndex 속성, 탭을 클릭할 때 호출될 콜백 메소드 onTap 속성, 각 탭에 대한 정보를 담은 items 속성으로 구성되어 있습니다.

위와 같이 구현하여 실행하면, 탭 메뉴를 클릭할 때마다 화면이 이동하며, 하단에 탭 메뉴가 표시될 수 있습니다.

[ Flame ]

Flame 프레임워크는 게임 개발에 사용되는 프레임워크입니다.
Flame의 기본 예제는 다음과 같습니다:

import 'package:flame/flame.dart';
import 'package:flame/game.dart';

class MyGame extends Game {
  @override
  void render(Canvas canvas) {
    // 게임을 그리는 코드
  }

  @override
  void update(double t) {
    // 게임을 업데이트하는 코드
  }
}

void main() async {
  await Flame.util.fullScreen();
  await Flame.util.setOrientation(DeviceOrientation.portraitUp);

  MyGame game = MyGame();
  await Flame.images.loadAll(<String>[
    'images/player.png',
    'images/enemy.png',
  ]);

  runApp(game.widget);
}

위의 예제에서 MyGame 클래스는 Game 클래스를 상속하여 정의합니다. render 메소드에서는 게임을 그리는 코드, update 메소드에서는 게임을 업데이트하는 코드를 구현할 수 있습니다.

main 함수에서는 게임 앱을 전체 화면으로 설정하고, 화면의 방향을 세로방향으로 설정하고, MyGame 객체를 생성하여 실행합니다. 이미지를 로드하는 부분에서는 게임에 사용될 이미지를 로드하고, runApp 함수를 이용하여 게임 앱을 실행합니다.

위의 예제는 Flutter와 Flame 프레임워크의 기본 구조와 기능에 대한 예제입니다. 실제 게임 개발에서는 이를 활용하여 더 복잡한 게임을 개발할 수 있습니다.

[ Flame > Box2D 물리엔진 ]

Flame 프레임워크에서 Box2D 물리엔진을 사용할 수 있습니다. 다음은 Box2D를 이용한 간단한 물리엔진 예제입니다.

import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:box2d_flame/box2d.dart';

class PhysicsGame extends Game {
  World world;
  Vector2 gravity;

  PhysicsGame() {
    // World 생성
    gravity = Vector2(0.0, -9.8);
    world = World.createWithGravity(gravity);

    // Body 생성
    var bodyDef = BodyDef();
    bodyDef.position = Vector2(0.0, 0.0);
    var body = world.createBody(bodyDef);

    // Shape 생성
    var shape = PolygonShape();
    shape.setAsBoxXY(1.0, 1.0);

    // Fixture 생성
    var fixtureDef = FixtureDef();
    fixtureDef.shape = shape;
    fixtureDef.density = 1.0;
    body.createFixtureFromDef(fixtureDef);
  }

  @override
  void render(Canvas canvas) {
    // Box2D 시뮬레이션
    world.stepDt(1 / 60, 6, 2);
  }

  @override
  void update(double t) {}
}

void main() async {
  // Flame 초기화
  WidgetsFlutterBinding.ensureInitialized();
  await Flame.util.fullScreen();
  await Flame.util.setOrientation(DeviceOrientation.portraitUp);

  // PhysicsGame 생성 및 실행
  var game = PhysicsGame();
  runApp(game.widget);
}

위의 예제에서는 World, Body, Shape, Fixture 등 Box2D의 기본 구성 요소를 생성하여 물리 시뮬레이션을 구현합니다. Box2D 물리엔진의 자세한 사용법은 Box2D 공식 문서를 참조하시면 됩니다.

[ 3D ]

Flutter에서 3D 파일을 보여주려면 Flutter 플러그인인 flutter_3d_obj를 사용할 수 있습니다. 다음은 flutter_3d_obj 플러그인을 사용하여 .glb 파일을 보여주는 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_3d_obj/flutter_3d_obj.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 3D Model Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 3D Model Example'),
        ),
        body: Center(
          child: Obj3dViewer(
            objFileAsset: 'assets/model.glb',
          ),
        ),
      ),
    );
  }
}

위 예제에서 Obj3dViewer 위젯은 flutter_3d_obj 플러그인에서 제공하는 위젯으로, .glb 파일을 보여주기 위한 뷰어 역할을 합니다. objFileAsset 속성에 assets/model.glb 파일의 경로를 지정하여 해당 파일을 로드할 수 있습니다.

위 코드를 기반으로 개발하기 위해서는 flutter_3d_obj 플러그인을 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가할 수 있습니다.

dependencies:
  flutter:
    sdk: flutter

  flutter_3d_obj: ^0.3.3

[ Flutter 커뮤니티 ]

Flutter 커뮤니티는 Flutter 개발자, 사용자, 애플리케이션 개발자 등 다양한 사용자들이 모여 경험, 지식, 아이디어를 공유하고 도움을 주고 받을 수 있는 공간입니다. 다음은 Flutter 커뮤니티에 참여할 수 있는 몇 가지 장소입니다.

Flutter 한국 사용자 그룹: https://www.facebook.com/groups/flutterkorea
Flutter 공식 웹사이트: https://flutter.dev/community
Flutter 공식 트위터 계정: https://twitter.com/flutterdev
Flutter 공식 유튜브 채널: https://www.youtube.com/c/flutter
Flutter 공식 Discord 채널: https://discord.gg/flutter
Stack Overflow: https://stackoverflow.com/questions/tagged/flutter

위의 장소들을 통해 Flutter 관련 질문, 토론, 프로젝트 공유, 자유 게시판 등 다양한 내용을 교환하고, Flutter 커뮤니티의 활성적인 구성원으로 참여할 수 있습니다.

[출처] https://banjubu.tistory.com/222

[flutter (플루터 앱 개발)] Flutter PDF 뷰어를 만드는 방법 : How to build a Flutter PDF viewer

졸리운_곰 — Sun, 19 Jan 2025 19:03:21 +0900

[flutter (플루터 앱 개발)] Flutter PDF 뷰어를 만드는 방법 : How to build a Flutter PDF viewer

본 기사는 2022년 3월에 처음 게시되었으며 2024년 9월에 업데이트되었습니다.

Flutter 는 Google에서 개발한 오픈 소스 프레임워크로, Dart의 단일 코드베이스에서 모바일, 웹 및 데스크톱용 네이티브 컴파일 애플리케이션을 만들 수 있습니다. 이 게시물에서는 Flutter에서 단일 페이지 문서를 처리하기 위한 기본 PDF 뷰어를 설정하는 과정을 안내합니다.

다양한 오픈 소스 옵션에서 PDF 보기에 적합한 패키지를 선택하는 방법을 알아보는 것으로 시작합니다. 그런 다음 선택한 패키지를 Flutter 프로젝트에 통합하여 기능적인 PDF 뷰어 앱을 만듭니다.

Flutter에 적합한 PDF 패키지 선택

Flutter용 PDF 라이브러리를 선택할 때는 요구 사항을 평가하고 패키지 품질 및 기능과 같은 요소를 고려하는 것이 필수적입니다. 간단한 사용 사례의 경우 오픈 소스 라이브러리를 탐색하는 것이 좋은 시작점입니다. 보다 고급 요구 사항의 경우 Nutrient는 포괄적인 기능을 갖춘 강력한 Flutter PDF SDK를 제공합니다 .

적합한 패키지를 찾으려면 pub.dev 에서 검색하면pdf 수많은 옵션이 나타납니다. 고려해야 할 주요 요소는 다음과 같습니다.

Pub 포인트 - null 안전성 지원 및 Dart 규칙 준수를 포함하여 정적 분석을 기반으로 한 패키지의 품질을 반영합니다.
인기 - 패키지를 사용하는 개발자의 수를 나타냅니다.
업데이트 빈도 - 최근 업데이트 날짜는 종종 활발하게 유지 관리되는 프로젝트를 의미합니다.
검증된 게시자 - 일부 패키지는 검증된 게시자로부터 제공되므로 신뢰도가 더욱 높아집니다.

검색 결과 중에서 주목할 만한 패키지는 다음과 같습니다.

flutter_pdfviewPDFView— Android와 iOS에서 위젯을 제공하는 Flutter 플러그인입니다 .
native_pdf_view— 웹, macOS, Windows, Android, iOS에서 PDF 파일을 렌더링하기 위한 Flutter 플러그인입니다.
advance_pdf_viewer— PDF 파일을 처리하기 위한 Flutter 플러그인입니다.

세 패키지를 빠르게 평가한 결과, flutter_pdfview간단한 PDF 뷰어를 구현하는 실험의 목표에 가장 적합한 것으로 판명되었습니다. GitHub 저장소 에 예제가 포함되어 있으며, 구성 단계는 따르기 쉽고, 후드 아래에는 PDFium 이라는 Google 라이브러리가 기반을 두고 있습니다. Nutrient 에서는 PDFium을 좋아합니다 ! ❤️

flutter_pdfview로 PDF 뷰어 구축

flutter_pdfviewAndroid와 iOS 플랫폼에서 PDF를 렌더링할 수 있는 Flutter 패키지입니다. Flutter 앱 내에서 PDF 파일을 표시하는 매끄러운 방법을 제공하며, 페이지 탐색, 확대/축소 등의 기능을 제공합니다. 사용자 지정 환경을 제공하기 위한 몇 가지 구성 옵션을 노출하며 , GitHub 저장소 에 예제 앱 이 포함되어 있습니다 .

사용 사례를 간단하게 유지하기 위해, 이 게시물에서는 API 30flutter_pdfview 이 있는 Android 기기에서 단일 페이지 PDF 문서를 표시하는 데 사용합니다 .

이 앱의 기본 레이아웃은 렌더링된 PDF 문서를 보여주는 위젯이며, 핀치 투 줌, 확대된 페이지 드래그와 같은 간단한 제스처가 가능합니다.

시작하기

시작하려면 개발 머신에 Flutter가 설치되고 설정되어 있는지 확인하세요. 다음 명령을 실행하여 확인할 수 있습니다.

플러터 닥터

이 명령은 Flutter로 개발을 시작하는 데 필요한 모든 것이 준비되었는지 확인합니다.

1단계 - 새로운 Flutter 프로젝트 생성

새로운 Flutter 프로젝트를 만드는 것으로 시작합니다. 터미널을 열고 다음을 실행합니다.

플러터 pdf_viewer_app 만들기

프로젝트 디렉토리로 이동합니다.

cd pdf_viewer_app

2단계 - flutter_pdfview 종속성 추가

다음으로, 종속성 아래 파일 flutter_pdfview에 패키지를 추가합니다 pubspec.yaml.

... 
종속성: 
  플러터: 
    SDK: 플러터 + flutter_pdfview: ^1.2.7
 ...

공백은 YAML 파일에서 중요하므로 위의 내용에 주의하세요.

flutter pub get패키지를 설치하려면 실행하세요 .

3단계 - Android 및 iOS 구성 업데이트

Android의 경우 minSdkVersion최소 21 이상 이어야 합니다 android/app/build.gradle.

기본 구성 { 
    ... 
    최소 SDK 버전 21 
    ... 
}

iOS의 경우 다음을 추가하여 Swift 지원을 활성화하세요 ios/Podfile.

플랫폼 :ios , '11.0'

이제 PDF 뷰어 위젯을 만듭니다. lib/main.dart해당 내용을 열고 다음 코드로 바꿉니다.

' 패키지  : 플러터/material.dart' 가져오기  ;
 '패키지: 플러터_pdfview/플러터_pdfview.dart' 가져오기  ;
 '패키지: 경로_공급자/경로_공급자.dart ' 가져오기  ;
 '다트:io' 가져오기 ;
 '다트:async' 가져오기  ;
 '패키지: 플러터/services.dart' 가져오기 ; void main() => runApp(MyApp()); MyApp 클래스는 StatelessWidget을 확장합니다 . 
  @override 
  Widget build(BuildContext context) { return MaterialApp( 
      home: PDFScreen(), 
    ); 
  } 
} PDFScreen 클래스는 StatefulWidget을 확장합니다. @override 
  _PDFScreenState 
  createState() => _PDFScreenState(); 
} _PDFScreenState 클래스는 State을
   확장합니다 . { String ? _localPath;
   int ? _totalPages = 0 ;
   int ? _currentPage = 0 ;
   bool pdfReady = false ; 
  늦은 PDFViewController _pdfViewController; 
  @override void initState() {
     super .initState(); 
    fromAsset( 'assets/sample.pdf' , 'sample.pdf' ).then((file) { 
      setState(() { 
        _localPath = 파일.경로; 
        pdfReady = true ; 
      }); 
    }); 
  } 
  Future fromAsset( 문자열 자산, 문자열 파일 이름) 비동기 {
     최종 byteData = rootBundle.load(자산)를 기다립니다.
     최종 파일 = File( ' ${(await getTemporaryDirectory()).경로} / $파일 이름 ' ); 
    file.writeAsBytes(byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes)를 기다립니다. 파일을 반환합니다 . 
  } 
  @override 
  위젯 빌드(BuildContext 컨텍스트) { return Scaffold( 
      appBar: AppBar( 
        title: Text( 'PDF 뷰어' ), 
        actions: _totalPages != null 
            ? [ 
                Center(child: Text( ' ${_currentPage! + 1} / $_totalPages ' )), 
                IconButton( 




    





  

    

    
                  아이콘: 아이콘(아이콘.chevron_left), 
                  눌렸을 때: () { 
                    setState(() { _ 
                      현재 페이지 = (_현재 페이지! - 1 ).clamp( 0 , _총 페이지! - 1 ); 
                    }); 
                    _pdfViewController.setPage(_현재 페이지!); 
                  }, 
                ), 
                아이콘 버튼( 
                  아이콘: 아이콘(아이콘.chevron_right), 
                  눌렸을 때: () { 
                    setState(() { 
                      _현재 페이지 = (_현재 페이지! + 1 ).clamp( 0 , _총 페이지! - 1 ); 
                    }); 
                    _pdfViewController.setPage(_현재 페이지!); 
                  }, 
                ), 
              ] 
            : null , 
      ), 
      본문: pdfReady 
          ? PDFView( 
              파일 경로: _localPath, 
              enableSwipe: true , 
              swipeHorizontal: true , 
              autoSpacing: false , 
              pageFling: false , 
              렌더링 시: (_pages) { 
                setState(() { 
                  _totalPages = _pages; 
                }); 
              }, 뷰 생성 시 
              : (PDFViewController vc) { 
                _pdfViewController = vc; 
              }, 
              페이지 변경 시: (페이지, 전체) { 
                setState(() { 
                  _currentPage = 페이지; 
                }); 
              }, 
              오류 시: (오류) { 
                print(error.toString()); 
              }, 
              페이지 오류 시: (페이지, 오류) { 
                print( ' $page : ${error.toString()} ' ); 
              }, 
            ) 
          : Center(자식: CircularProgressIndicator()), 
    ); 
  } 
}

5단계 - 샘플 PDF 추가

폴더 에 이름이 지정된 샘플 PDF 문서를 추가합니다 . 폴더가 없으면 프로젝트의 루트 디렉토리에 만듭니다. 그런 다음 파일을 업데이트하여 자산을 포함합니다.sample.pdfassetspubspec.yaml

1 
2 
3

플러터:
 + 에셋: 
+ - 에셋/샘플.pdf

6단계 - 앱 실행

PDF 뷰어를 실행하려면 실제 Android 기기를 연결하거나 Android Virtual Device Manager 에서 에뮬레이터를 열어야 합니다 . 그런 다음 명령줄에서 다음을 입력합니다.

플러터 런

짧은 개발 과정을 거치면 PDF 뷰어 앱을 Android 기기에서 사용할 수 있습니다. ????

결론

이 블로그 게시물에서는 오픈 소스 패키지 세트에서 PDF 패키지를 선택할 때 고려해야 할 몇 가지 요소를 다루었고, flutter_pdfview너무 번거롭지 않고 간단한 사용 사례를 해결하는 데 좋은 오픈 소스 Flutter PDF 라이브러리를 사용하여 PDF 뷰어를 빌드하는 방법을 보여드렸습니다. 그러나 AndroidPdfViewer라이브러리 의 기반이 되는 는 몇 년 동안 업데이트를 받지 못했으며, 현재 읽기 전용인 아티팩트 저장소인 JCenterflutter_pdfview 에 여전히 게시되어 있습니다 .

더 복잡한 사용자 정의를 위해 Nutrient는 자세한 시작 가이드가 포함된 자체 Flutter PDF 라이브러리를 제공합니다 . Nutrient에는 다음을 포함한 많은 기본 기능이 제공됩니다.

간편하고 사용하기 쉬운 사용자 정의 UI .
문서에 주석을 달거나 PDF 양식 에 디지털 서명을 추가하는 등 의 기능을 쉽게 추가할 수 있는 내장형 사전 구축 도구입니다 .
다양한 파일 형식 지원 - 이미지 파일(JPG, PNG, TIFF)부터 PDF 문서까지.

또한 지속적인 개선 및 버그 수정을 통해 활발한 개발 주기를 제공합니다 . Nutrient Flutter SDK를 시작하려면 무료 평가판을 확인하세요 . Flutter PDF 라이브러리에 대한 질문이 있으면 언제든지 문의하세요 . 기꺼이 도와드리겠습니다!

자주 묻는 질문

Flutter PDF 뷰어를 만드는 데 관해 자주 묻는 몇 가지 질문은 다음과 같습니다.

Flutter에 적합한 PDF 패키지를 선택하려면 어떻게 해야 하나요?

PDF 패키지를 선택할 때는 퍼브 포인트, 인기, 업데이트 빈도, 패키지가 필요한 기능을 지원하는지 여부와 같은 요소를 고려하세요. Flutter의 인기 패키지에는 flutter_pdfview, native_pdf_view, 및 가 있습니다 advance_p.

This article was first published in March 2022 and was updated in September 2024.

Flutter is an open source framework developed by Google that allows for creating natively compiled applications for mobile, web, and desktop from a single codebase in Dart. This post will walk through the process of setting up a basic PDF viewer in Flutter to handle single-page documents.

It’ll start by exploring how to choose the right package for PDF viewing from a range of open source options. Then, you’ll proceed to integrate the selected package into a Flutter project, resulting in a functional PDF viewer app.

Choosing the right PDF package for Flutter

When selecting a PDF library for Flutter, it’s essential to evaluate your requirements and consider factors like package quality and functionality. For simple use cases, exploring open source libraries is a great starting point. For more advanced needs, Nutrient offers a robust Flutter PDF SDK with comprehensive features.

To find suitable packages, searching for pdf on pub.dev reveals a plethora of options. Key factors to consider include:

Pub points — Reflects the quality of the package based on static analysis, including support for null safety and adherence to Dart conventions.
Popularity — Indicates the number of developers using the package.
Update frequency — A recent update date often signifies an actively maintained project.
Verified publisher — Some packages come from verified publishers, adding an extra layer of trust.

Among the search results, the following packages are noteworthy:

flutter_pdfview — A Flutter plugin that provides a PDFView widget on Android and iOS.
native_pdf_view — A Flutter plugin for rendering PDF files on web, macOS, Windows, Android, and iOS.
advance_pdf_viewer — A Flutter plugin for handling PDF files.

After a quick assessment of the three packages, flutter_pdfview proved to be the most suitable for the goal of the experiment of implementing a simple PDF viewer. It has an example included in the GitHub repository, the configuration steps are easy to follow, and under its hood, it’s based on a Google library called PDFium — and here at Nutrient, we love PDFium! ❤️

Building a PDF viewer with flutter_pdfview

flutter_pdfview is a Flutter package that allows you to render PDFs on both Android and iOS platforms. It provides a seamless way to display PDF files within your Flutter app, offering features such as page navigation, zooming, and more. It exposes some configuration options to provide a customized experience, and there’s an example app included in the GitHub repository.

To keep the use case simple, this post will use flutter_pdfview to show a single-page PDF document on an Android device with API 30.

The main layout of the app will be a widget showing the rendered PDF document, and it’ll allow simple gestures like pinch-to-zoom and dragging the zoomed page.

Getting started

To get started, ensure you have Flutter installed and set up on your development machine. You can check this by running the following command:

flutter doctor

This command will verify if you have everything in place to start developing with Flutter.

Step 1 — Creating a new Flutter project

Begin by creating a new Flutter project. Open your terminal and run:

flutter create pdf_viewer_app

Navigate to your project directory:

cd pdf_viewer_app

Step 2 — Adding the flutter_pdfview dependency

Next, add the flutter_pdfview package to your pubspec.yaml file under dependencies:

...
dependencies:
  flutter:
    sdk: flutter
+ flutter_pdfview: ^1.2.7
...

Be careful with the above, as spaces matter in YAML files.

Run flutter pub get to install the package.

Step 3 — Updating the Android and iOS configurations

For Android, ensure your minSdkVersion is at least 21 in android/app/build.gradle:

defaultConfig {
    ...
    minSdkVersion 21
    ...
}

For iOS, enable Swift support by adding the following to your ios/Podfile:

platform :ios, '11.0'

Now you’ll create the PDF viewer widget. Open lib/main.dart and replace its content with the following code:

import 'package:flutter/material.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
import 'dart:async';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PDFScreen(),
    );
  }
}

class PDFScreen extends StatefulWidget {
  @override
  _PDFScreenState createState() => _PDFScreenState();
}

class _PDFScreenState extends State {
  String? _localPath;
  int? _totalPages = 0;
  int? _currentPage = 0;
  bool pdfReady = false;
  late PDFViewController _pdfViewController;

  @override
  void initState() {
    super.initState();
    fromAsset('assets/sample.pdf', 'sample.pdf').then((file) {
      setState(() {
        _localPath = file.path;
        pdfReady = true;
      });
    });
  }

  Future fromAsset(String asset, String fileName) async {
    final byteData = await rootBundle.load(asset);
    final file = File('${(await getTemporaryDirectory()).path}/$fileName');
    await file.writeAsBytes(byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));
    return file;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
        actions: _totalPages != null
            ? [
                Center(child: Text('${_currentPage! + 1} / $_totalPages')),
                IconButton(
                  icon: Icon(Icons.chevron_left),
                  onPressed: () {
                    setState(() {
                      _currentPage = (_currentPage! - 1).clamp(0, _totalPages! - 1);
                    });
                    _pdfViewController.setPage(_currentPage!);
                  },
                ),
                IconButton(
                  icon: Icon(Icons.chevron_right),
                  onPressed: () {
                    setState(() {
                      _currentPage = (_currentPage! + 1).clamp(0, _totalPages! - 1);
                    });
                    _pdfViewController.setPage(_currentPage!);
                  },
                ),
              ]
            : null,
      ),
      body: pdfReady
          ? PDFView(
              filePath: _localPath,
              enableSwipe: true,
              swipeHorizontal: true,
              autoSpacing: false,
              pageFling: false,
              onRender: (_pages) {
                setState(() {
                  _totalPages = _pages;
                });
              },
              onViewCreated: (PDFViewController vc) {
                _pdfViewController = vc;
              },
              onPageChanged: (page, total) {
                setState(() {
                  _currentPage = page;
                });
              },
              onError: (error) {
                print(error.toString());
              },
              onPageError: (page, error) {
                print('$page: ${error.toString()}');
              },
            )
          : Center(child: CircularProgressIndicator()),
    );
  }
}

Step 5 — Adding a sample PDF

Add a sample PDF document named sample.pdf to your assets folder. If the folder doesn’t exist, create it in the root directory of your project. Then, update your pubspec.yaml file to include the assets:

1
2
3

flutter:
+  assets:
+    - assets/sample.pdf

Step 6 — Running the app

To run the PDF viewer, make sure to connect a physical Android device or open an emulator from the Android Virtual Device Manager. Then from the command line, type:

flutter run

After a short building process, the PDF viewer app will be ready to use on the Android device. ????

Conclusion

In this blog post, we covered some factors to look at when selecting a PDF package from a set of open source packages, and we showed you how to build a PDF viewer using the open source Flutter PDF library, flutter_pdfview, which is good for solving simple use cases without too much hassle. However, AndroidPdfViewer — the library flutter_pdfview is based on — hasn’t received an update in a few years, and it’s still published to JCenter, an artifact repository that’s now read-only.

For more complex customizations, Nutrient offers its own Flutter PDF library with a detailed getting started guide. Nutrient ships with many features out of the box, including:

A customizable UI that’s simple and easy to use.
Embeddable prebuilt tools to easily add functionality like annotating documents, adding digital signatures to a PDF form, and much more.
Multiple file type support — from image files (JPG, PNG, TIFF) to PDF documents.

It also features active development cycles with constant improvements and bug fixes. To get started with Nutrient Flutter SDK, check out our free trial. If you have any questions about our Flutter PDF library, please don’t hesitate to reach out to us. We’re happy to help!

[출처] https://www.nutrient.io/blog/how-to-build-a-flutter-pdf-viewer/

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (6) 드래그로 Canvas 내 Object 이동시키기

졸리운_곰 — Sun, 19 Jan 2025 16:35:22 +0900

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (6) 드래그로 Canvas 내 Object 이동시키기

Flutter Canvas 드래그로 Object 이동시키기

이 포스팅에서는 Flutter Canvas에서 드래그를 통해 객체(Object)를 이동시키는 방법을 설명합니다. 사용자는 특정 객체를 터치하고 드래그하여 원하는 위치로 이동시킬 수 있습니다.

1. Node 클래스

먼저, 이동 가능한 객체를 나타내는 Node 클래스를 정의합니다.

class Node {

String id;

String name;

double x;

double y;

Node(this.id, this.name, this.x, this.y);

}

id: 객체의 고유 식별자.
name: 객체에 표시될 텍스트.
x, y: Canvas에서의 좌표.

2. DraggablePainter 클래스

Canvas에 배경, 그리드, 객체를 그리는 CustomPainter를 정의합니다.

class DraggablePainter extends CustomPainter {
  static const gridWidth = 50.0;
  static const gridHeight = 50.0;

  final double offsetX;
  final double offsetY;
  final List nodeList;

  DraggablePainter(this.nodeList, this.offsetX, this.offsetY);

  void _drawBackground(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.white70;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

  void _drawGrid(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.grey;
    for (double x = 0; x < size.width; x += gridWidth) {
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);
    }
    for (double y = 0; y < size.height; y += gridHeight) {
      canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);
    }
  }

  void _drawNodes(Canvas canvas) {
    final paint = Paint()..color = Colors.amber;
    const textStyle = TextStyle(color: Colors.black, fontSize: 14);
    const radius = 30.0;

    for (final node in nodeList) {
      final center = Offset(node.x, node.y);
      canvas.drawCircle(center, radius, paint);
      _drawText(canvas, node.x, node.y, node.name, textStyle);
    }
  }

  void _drawText(Canvas canvas, double x, double y, String text, TextStyle style) {
    final textSpan = TextSpan(text: text, style: style);
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    )..layout();
    final offset = Offset(x - textPainter.width / 2, y - textPainter.height / 2);
    textPainter.paint(canvas, offset);
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.save();
    canvas.translate(offsetX, offsetY);

    _drawBackground(canvas, size);
    _drawGrid(canvas, size);
    _drawNodes(canvas);

    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

3. GestureDetector를 활용한 드래그 이벤트 처리

사용자의 드래그 이벤트를 처리하여 객체를 이동시킵니다.

class DraggableObjectPageState extends State {

final List nodeList = [

Node("1", "Node\n1", 150.0, 180.0),

Node("2", "Node\n2", 220.0, 40.0),

Node("3", "Node\n3", 380.0, 240.0),

Node("4", "Node\n4", 640.0, 190.0),

Node("5", "Node\n5", 480.0, 350.0),

];

double offsetX = 0.0;

double offsetY = 0.0;

double preX = 0.0;

double preY = 0.0;

Node? currentNode;

Node? _getNodeAt(double x, double y) {

const radius = 30.0;

for (final node in nodeList) {

final distance = (node.x - x).abs() + (node.y - y).abs();

if (distance <= radius) {

return node;

}

return null;

}

void _handlePanDown(DragDownDetails details) {

final x = details.localPosition.dx - offsetX;

final y = details.localPosition.dy - offsetY;

currentNode = _getNodeAt(x, y);

preX = details.localPosition.dx;

preY = details.localPosition.dy;

}

void _handlePanUpdate(DragUpdateDetails details) {

final dx = details.localPosition.dx - preX;

final dy = details.localPosition.dy - preY;

if (currentNode != null) {

setState(() {

currentNode!.x += dx;

currentNode!.y += dy;

});

} else {

setState(() {

offsetX += dx;

offsetY += dy;

});

}

preX = details.localPosition.dx;

preY = details.localPosition.dy;

}

@override

Widget build(BuildContext context) {

return Scaffold(

body: GestureDetector(

onPanDown: _handlePanDown,

onPanUpdate: _handlePanUpdate,

child: CustomPaint(

painter: DraggablePainter(nodeList, offsetX, offsetY),

child: Container(),

);

}

결론

이 코드를 통해 사용자는 Canvas 내부의 특정 객체를 드래그로 이동시킬 수 있습니다. GestureDetector와 CustomPainter를 적절히 활용하여 직관적인 인터페이스를 제공합니다. 추가적으로, 객체와 Canvas 전체의 동시 이동도 처리할 수 있습니다.

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (5) 드래그로 Canvas 이동시키기

졸리운_곰 — Sat, 18 Jan 2025 20:04:38 +0900

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (5) 드래그로 Canvas 이동시키기

Flutter Canvas 드래그로 이동시키기

Flutter Canvas에서 드래그로 화면을 이동시키는 기능은 GestureDetector와 CustomPainter를 활용하여 구현할 수 있습니다. 이 포스팅에서는 Canvas를 드래그해 이동시키는 방법을 코드와 함께 자세히 설명합니다.

1. 기본 아이디어

사용자가 드래그를 시작하면 초기 터치 좌표를 저장합니다.
드래그를 업데이트할 때마다 이전 좌표와 현재 좌표의 차이를 계산하여 Canvas의 이동량(offset)을 갱신합니다.
CustomPainter를 사용하여 Canvas의 내용을 그릴 때 이동된 위치를 반영합니다.

2. 주요 코드

GestureDetector를 활용한 드래그 이벤트 처리

class DraggableObjectPageState extends State {

var offsetX = 0.0;

var offsetY = 0.0;

var preX = 0.0;

var preY = 0.0;

@override

Widget build(BuildContext context) {

return Scaffold(

body: GestureDetector(

onPanDown: (detail) {

preX = detail.localPosition.dx;

preY = detail.localPosition.dy;

onPanUpdate: (detail) {

setState(() {

final dx = detail.localPosition.dx - preX;

final dy = detail.localPosition.dy - preY;

offsetX += dx;

offsetY += dy;

preX = detail.localPosition.dx;

preY = detail.localPosition.dy;

});

child: CustomPaint(

child: Container(),

painter: DraggablePainter(offsetX, offsetY),

);

}

3. Canvas에 이동 반영

CustomPainter의 paint 메서드에서 canvas.translate를 사용하여 이동량을 반영합니다.

class DraggablePainter extends CustomPainter {

final double offsetX;

final double offsetY;

DraggablePainter(this.offsetX, this.offsetY);

@override

void paint(Canvas canvas, Size size) {

canvas.save();

canvas.translate(offsetX, offsetY);

// 배경 그리기

_drawBackground(canvas, size);

// 그리드 그리기

_drawGrid(canvas, size);

canvas.restore();

}

void _drawBackground(Canvas canvas, Size size) {

final paint = Paint()..color = Colors.white70;

canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);

}

void _drawGrid(Canvas canvas, Size size) {

final paint = Paint()..color = Colors.grey;

const double gridSize = 50.0;

for (double x = 0; x < size.width; x += gridSize) {

canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);

}

for (double y = 0; y < size.height; y += gridSize) {

canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

4. 결과

GestureDetector를 사용하여 드래그 이벤트를 처리하고, Canvas의 오프셋(offset)을 업데이트합니다.
Canvas를 이동시킬 때 그리드와 기타 요소들도 함께 이동합니다.
CustomPainter를 활용하여 Canvas를 갱신합니다.

코드 전체

import 'package:flutter/material.dart';

class DraggableObjectPage extends StatefulWidget {

@override

State createState() => _DraggableObjectPageState();

}

class _DraggableObjectPageState extends State {

double offsetX = 0.0;

double offsetY = 0.0;

double preX = 0.0;

double preY = 0.0;

@override

Widget build(BuildContext context) {

return Scaffold(

body: GestureDetector(

onPanDown: (details) {

preX = details.localPosition.dx;

preY = details.localPosition.dy;

onPanUpdate: (details) {

setState(() {

offsetX += details.localPosition.dx - preX;

offsetY += details.localPosition.dy - preY;

preX = details.localPosition.dx;

preY = details.localPosition.dy;

});

child: CustomPaint(

size: Size.infinite,

painter: DraggablePainter(offsetX, offsetY),

);

}

class DraggablePainter extends CustomPainter {

final double offsetX;

final double offsetY;

DraggablePainter(this.offsetX, this.offsetY);

@override

void paint(Canvas canvas, Size size) {

canvas.save();

canvas.translate(offsetX, offsetY);

final backgroundPaint = Paint()..color = Colors.white70;

canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), backgroundPaint);

final gridPaint = Paint()..color = Colors.grey;

const double gridSize = 50.0;

for (double x = 0; x < size.width; x += gridSize) {

canvas.drawLine(Offset(x, 0), Offset(x, size.height), gridPaint);

}

for (double y = 0; y < size.height; y += gridSize) {

canvas.drawLine(Offset(0, y), Offset(size.width, y), gridPaint);

}

canvas.restore();

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

결론

Flutter Canvas에서 드래그로 이동시키는 기능은 간단한 로직으로 구현할 수 있습니다. 이 방법을 사용하면 사용자가 직관적으로 Canvas를 제어할 수 있는 유용한 인터페이스를 만들 수 있습니다.

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (4) Canvas에 Text 그리기

졸리운_곰 — Sat, 18 Jan 2025 14:22:08 +0900

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (4) Canvas에 Text 그리기

Canvas에 Text 그리기

실행 화면

화면 특정 좌표에 원과 텍스트를 그리는 예제입니다. 원, 사각형, 라인 등은 좌표만 입력하면 쉽게 그릴 수 있기 때문에 사용법이 조금 다른 텍스트 그리기 위주로 포스팅합니다.

Flutter Canvas에서 텍스트 그리기: 자세한 설명과 코드

Flutter의 Canvas를 활용하여 화면에 텍스트를 그리는 방법을 다룹니다. 이 과정에서 TextPainter를 사용하여 텍스트를 원하는 위치에 그리는 예제를 제공합니다.

1. 텍스트 그리기 함수

Canvas에 텍스트를 그리기 위해서는 TextPainter를 활용해야 합니다. 아래는 텍스트를 중심 정렬로 그리는 함수입니다.

 void _drawText(Canvas canvas, double centerX, double centerY, String text, TextStyle style) {
  final textSpan = TextSpan(
    text: text,
    style: style,
  );

  final textPainter = TextPainter()
    ..text = textSpan
    ..textDirection = TextDirection.ltr
    ..textAlign = TextAlign.center
    ..layout();

  final double xCenter = centerX - textPainter.width / 2;
  final double yCenter = centerY - textPainter.height / 2;
  final Offset offset = Offset(xCenter, yCenter);

  textPainter.paint(canvas, offset);
}

설명

TextSpan: 텍스트와 스타일 정보를 담습니다.
TextPainter: 텍스트의 레이아웃을 계산하고 그립니다.
중심 정렬을 위해 텍스트의 너비와 높이를 계산한 후, 시작 위치를 보정합니다.

2. 전체 코드 예제

Canvas에 원과 텍스트를 함께 그리는 예제입니다.

 import 'package:flutter/material.dart';

class TextDrawingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        child: Container(),
        painter: TextPainterExample(),
      ),
    );
  }
}

class TextPainterExample extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 배경 그리기
    final paintBackground = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paintBackground);

    // 원과 텍스트 스타일 정의
    final paintCircle = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    final textStyle = TextStyle(
      color: Colors.white,
      fontSize: 20,
    );

    // 원과 텍스트 그리기
    final center = Offset(size.width / 2, size.height / 2);
    canvas.drawCircle(center, 50.0, paintCircle);
    _drawText(canvas, center.dx, center.dy, "Flutter", textStyle);
  }

  void _drawText(Canvas canvas, double centerX, double centerY, String text, TextStyle style) {
    final textSpan = TextSpan(
      text: text,
      style: style,
    );

    final textPainter = TextPainter()
      ..text = textSpan
      ..textDirection = TextDirection.ltr
      ..textAlign = TextAlign.center
      ..layout();

    final double xCenter = centerX - textPainter.width / 2;
    final double yCenter = centerY - textPainter.height / 2;
    final Offset offset = Offset(xCenter, yCenter);

    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

설명

CustomPainter를 사용하여 화면에 그립니다.
paint 메서드에서 배경, 원, 텍스트를 순차적으로 그립니다.
_drawText 함수는 텍스트의 위치와 스타일을 정렬하여 Canvas에 텍스트를 렌더링합니다.

결론

Flutter Canvas에서 텍스트를 그리는 방법은 TextPainter를 활용하여 구현할 수 있습니다. 이 과정을 통해 원하는 위치에 텍스트를 표시하고, 다양한 스타일을 적용할 수 있습니다.

이 코드를 기반으로 다양한 응용을 시도해보세요! 필요 시 추가적으로 커스터마이징이 가능합니다.

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (3) Canvas내의 터치(마우스) 좌표 획득하는 방법

졸리운_곰 — Fri, 17 Jan 2025 18:38:32 +0900

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (3) Canvas내의 터치(마우스) 좌표 획득하는 방법

Flutter Canvas에서 터치(마우스) 좌표를 획득하는 방법

Flutter의 Canvas를 활용해 화면에서 터치 또는 마우스의 좌표를 획득하는 방법을 다룹니다. 이 과정에서 GestureDetector와 CustomPainter를 활용하며, 구현한 코드를 함께 제공합니다.

GestureDetector로 좌표 획득

Flutter에서는 GestureDetector 위젯을 사용하여 터치 이벤트를 감지하고, 해당 좌표를 획득할 수 있습니다.

코드 예제

 import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  const GridPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTapDown: (detail) {
          print("onTapDown:(${detail.localPosition})");
        },
        onTapUp: (detail) {
          print("onTapUp:(${detail.localPosition})");
        },
        onHorizontalDragUpdate: (detail) {
          print("onHorizontalDragUpdate:(${detail.localPosition})");
        },
        child: CustomPaint(
          child: Container(),
          painter: GridPainter(),
        ),
      ),
    );
  }
}

설명

GestureDetector는 사용자의 터치 이벤트를 감지합니다.
- onTapDown: 터치가 발생한 좌표를 출력.
- onTapUp: 터치가 끝난 좌표를 출력.
- onHorizontalDragUpdate: 드래그하는 동안의 좌표를 실시간으로 출력.
이 위젯의 child에 CustomPaint를 사용하여 그리드를 화면에 표시합니다.

CustomPainter로 배경과 그리드 그리기

다음 코드는 Canvas에 그리드와 배경을 그리며, GestureDetector와 결합하여 터치 좌표를 얻을 수 있습니다.

전체 코드

 import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  const GridPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTapDown: (detail) {
          print("onTapDown:(${detail.localPosition})");
        },
        onTapUp: (detail) {
          print("onTapUp:(${detail.localPosition})");
        },
        onHorizontalDragUpdate: (detail) {
          print("onHorizontalDragUpdate:(${detail.localPosition})");
        },
        child: CustomPaint(
          child: Container(),
          painter: GridPainter(),
        ),
      ),
    );
  }
}

class GridPainter extends CustomPainter {
  static const double gridWidth = 50.0;
  static const double gridHeight = 50.0;

  @override
  void paint(Canvas canvas, Size size) {
    // 배경 색상
    var backgroundPaint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.lime
      ..isAntiAlias = true;

    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), backgroundPaint);

    // 그리드 선 색상
    var linePaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.black38
      ..isAntiAlias = true;

    // 가로선
    for (double y = 0; y <= size.height; y += gridHeight) {
      canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
    }

    // 세로선
    for (double x = 0; x <= size.width; x += gridWidth) {
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

설명

GridPainter는 고정된 간격의 그리드를 그립니다.
CustomPainter의 paint 메서드는 Canvas를 사용하여 배경과 선을 그립니다.
GestureDetector와 결합하면 그리드에서 터치 좌표를 손쉽게 감지할 수 있습니다.

결론

Flutter의 GestureDetector는 사용자 입력 이벤트를 처리하고, CustomPainter는 화면에 원하는 요소를 그릴 수 있는 강력한 도구입니다. 이를 결합하여 터치 이벤트와 시각적 피드백을 모두 처리할 수 있습니다.

위 코드를 사용해 Canvas에서 터치 좌표를 감지하는 기능을 구현해보세요! 추가로 커스터마이징이 필요하면 알려주세요.

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (2) Grid 격자 그리기

졸리운_곰 — Fri, 17 Jan 2025 18:25:48 +0900

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (2) Grid 격자 그리기

Flutter의 Canvas를 활용하여 그리드를 그리는 방법을 두 가지로 설명합니다. 첫 번째는 화면 크기에 맞춘 10x10 Grid, 두 번째는 고정된 간격으로 그리는 Grid입니다. 아래는 코드와 설명을 포함한 가이드입니다.

1. 10x10 Grid 그리기

화면 크기에 따라 10x10으로 동적으로 크기가 조정되는 격자입니다.

코드

 import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  const GridPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        child: Container(),
        painter: GridPainter(),
      ),
    );
  }
}

class GridPainter extends CustomPainter {
  static const int rows = 10;
  static const int cols = 10;

  @override
  void paint(Canvas canvas, Size size) {
    // 배경 색상
    var backgroundPaint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.lime
      ..isAntiAlias = true;

    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(rect, backgroundPaint);

    // 격자 선 색상
    var linePaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.black38
      ..isAntiAlias = true;

    final double gridWidth = size.width / cols;
    final double gridHeight = size.height / rows;

    // 가로선
    for (int row = 0; row <= rows; row++) {
      final double y = row * gridHeight;
      canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
    }

    // 세로선
    for (int col = 0; col <= cols; col++) {
      final double x = col * gridWidth;
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

설명

CustomPainter를 활용하여 격자를 그립니다.
paint 메서드에서 Canvas와 Size를 사용하여 그리드를 동적으로 계산합니다.
화면 크기에 따라 각 셀의 크기가 동적으로 변경됩니다.

2. 고정 간격 Grid 그리기

화면 크기와 상관없이 고정된 간격으로 격자를 그립니다.

코드

 import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  const GridPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        child: Container(),
        painter: GridPainter(),
      ),
    );
  }
}

class GridPainter extends CustomPainter {
  static const double gridWidth = 50.0;
  static const double gridHeight = 50.0;

  @override
  void paint(Canvas canvas, Size size) {
    // 배경 색상
    var backgroundPaint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.lime
      ..isAntiAlias = true;

    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), backgroundPaint);

    // 격자 선 색상
    var linePaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.black38
      ..isAntiAlias = true;

    // 가로선
    for (double y = 0; y <= size.height; y += gridHeight) {
      canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
    }

    // 세로선
    for (double x = 0; x <= size.width; x += gridWidth) {
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

설명

gridWidth와 gridHeight를 고정값으로 설정하여 일정 간격의 격자를 만듭니다.
화면 크기가 작아도 고정된 간격의 격자가 유지됩니다.

결론

Flutter Canvas는 다양한 방식으로 화면에 그리드를 그릴 수 있는 강력한 도구입니다. 첫 번째 방법은 동적 크기 조절이 필요한 경우, 두 번째 방법은 고정된 격자를 원하는 경우에 적합합니다. 두 방법 모두 Flutter 앱 디자인에 유용하게 활용될 수 있습니다.

해당 코드로 직접 격자를 구현하며 Flutter Canvas의 가능성을 탐험해보세요!

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (1) 배경 색상 그리기

졸리운_곰 — Thu, 16 Jan 2025 22:48:49 +0900

[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (1) 배경 색상 그리기

Canvas 사용하기

Flutter에서 Canvas를 사용하기 위해서는 CustomPainter라는 위젯을 상속받아 구현해야 합니다. 그리고 void paint(...) 함수와 bool shouldRepaint(...) 함수를 오버라이드해서 구현해주면 됩니다.

BackgroundPainter 클래스

class BackgroundPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var background = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.lime
      ..isAntiAlias = true;

    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(rect, background);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

void paint(Canvas canvas, Size size) 메소드의 인자로 넘어오는 size는 현재 CustomPainter의 크기가 들어옵니다.

EmptyPage 클래스

그리고 위에서 구현한 BackgroundPainter를 화면에 그리기 위해서는 다음과 같이 CustomPainter의 paint 속성에 위에서 만든 객체를 배치하면 됩니다.

class EmptyPage extends StatelessWidget {
  const EmptyPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        child: Container(),
        painter: BackgroundPainter(),
      ),
    );
  }
}

여기서 주의할 점은 CustomPaint 속성 중 child: Container()를 지정해주어야 BackgroundPainter 클래스의 void paint(Canvas canvas, Size size) 함수 인자인 size 크기가 전달됩니다. 만약 child 속성이 없다면 size는 (0, 0)이 됩니다.

전체 코드

import 'package:flutter/material.dart';

class EmptyPage extends StatelessWidget {
  const EmptyPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        child: Container(),
        painter: BackgroundPainter(),
      ),
    );
  }
}

class BackgroundPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var background = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.lime
      ..isAntiAlias = true;

    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(rect, background);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

main.dart

import ‘package:flutter/material.dart’;

import ‘canvas/01_background_color.dart’;

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ‘Flutter Demo’, debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: EmptyPage(), ); } }

실행 화면

[출처] https://snowdeer.github.io/flutter/2021/12/28/flutter-custom-painter-example-01/

[게임 일반] 선택 기반 게임의 표준 패턴 : Standard Patterns in Choice-Based Games

졸리운_곰 — Mon, 13 Jan 2025 15:07:10 +0900

[게임 일반] 선택 기반 게임의 표준 패턴 : Standard Patterns in Choice-Based Games

선택 기반 게임의 표준 패턴

2015년 1월 26일 게시자 : Sam Kabo Ashwell

몇 년 전 CYOA 작업의 구조를 분석할 때, 저는 몇 가지 강력한 반복적 디자인 패턴을 인식하기 시작했습니다. 저는 몇 가지 자체 제작 용어를 생각해 냈지만, 그것을 멋지고 명확한 방식으로 배치한 적은 없습니다. 이것은 다소 업데이트된(그 이후로 많은 것이 바뀌었습니다) 몇 가지 보다 일반적인 접근 방식에 대한 비철저한 검토입니다.

이것들이 별개의 범주가 아니라는 점을 강조해야겠습니다. 많은 작품이 매우 간단하게 단일 패턴에 속하지만, 많은 작품이 여러 패턴의 요소를 포함할 것입니다. (그리고 물론, 종종 다른 패턴의 메커니즘을 사용하여 하나를 시뮬레이션할 수 있다는 것을 알고 있습니다. 그것은 대부분 요점이 아닙니다.) 또한, 제가 사용하는 예시 다이어그램은 실제 작품에서 볼 수 있는 것보다 작고 간단합니다.

시간 동굴. 심하게 분기된 시퀀스. 모든 선택은 대략 동등한 중요성을 갖습니다. 재병합이 거의 없거나 전혀 없으므로 상태 추적이 필요 없습니다. 수많은 엔딩이 있습니다.

효과: 시간 동굴은 가장 오래되고 가장 명확한 CYOA 구조입니다. 자유와 열린 가능성에 대한 서사, 어디든 갈 수 있는 모험, 공상에 대한 비행에 종종 좋습니다. 시간 동굴은 비교적 짧은 플레이스루를 갖는 경향이 있지만, 리플레이를 강력히 권장합니다. 길기보다는 광범위하기 때문입니다. 여러 번 플레이하더라도 대부분 플레이어는 아마도 콘텐츠의 상당 부분을 놓칠 것입니다.

시간 동굴의 구조는 연대순 진행에 따라 조직되고 그것과 분리되어 있습니다. 규칙성에 근거하지 않습니다. 가능성이 너무 열려 있어서 종종 환상적이거나 초현실적이 되고, 다른 가지가 완전히 다른 현실을 차지합니다. 플레이어는 속도가 있지만 이해력이 부족하고, 자유가 엄청나지만 이해할 능력이 부족합니다.

예: 에드워드 패커드의 초기 작품( 시간의 동굴 , 사탕수수 섬 ), 에밀리 쇼트의 어둡고 폭풍우 같은 입구 , 예쁜 작은 실수들 .

장갑. 폭이 넓지 않고 긴 장갑은 비교적 선형적인 중앙 실을 가지고 있으며, 죽음, 후퇴 또는 빠른 재결합으로 끝나는 가지에 의해 가지치기됩니다. 장갑은 일반적으로 하나의 기름 부음받은 이야기를 말하는데, 이는 선택적인 내용으로 장식되거나 실패로 조기에 끝날 수 있습니다. 여러 개의 엔딩이 있는 경우 최종 선택에서 파생될 가능성이 높습니다. 장갑은 거의 국가에 크게 의존하지 않습니다(그렇게 하는 경우 가지와 병목 구조로 발전할 가능성이 높습니다).

효과: 플레이어는 자신이 제한된 경로에 있다는 것을 깨달을 가능성이 높지만, 측면 분기의 표현은 매우 중요합니다. 죽음을 의미할까요? 잘못된 답변일까요? 시간을 거슬러 여행할까요? 막힌 경로, 각주 또는 풍경 세부 정보일까요? 대부분의 경우, 건틀릿은 위험하고 어렵거나 제한된 세계의 분위기를 조성합니다. 때로는 이것이 처벌적이거나 우울할 수 있습니다. 때로는 어둡고 코믹할 수 있습니다. 때로는 성찰적이거나 수사적 선택에 크게 의존하는 작품에 있다는 신호입니다. 아마도 작성하기 가장 쉬운 구조인 건틀릿은 선형 스토리와 비슷한 용어로 구상할 수 있으며, 대부분의 플레이어가 중요한 콘텐츠의 대부분을 볼 수 있도록 합니다.

건틀릿에는 치명적인 건틀릿과 친절한 건틀릿의 두 가지 주요 종류가 있습니다. 치명적인 건틀릿은 대부분 실패 로 나무를 가지치고 친절한 건틀릿은 대부분 짧은 범위의 재결합으로 가지치고 간단한 가지와 병목 구조 처럼 보입니다 . 친절한 건틀릿은 최근 몇 년 동안 훨씬 더 흔해져서 Twine 작업의 높은 비율을 차지합니다.

예: Zork: The Forces of Krill . Our Boys In Uniform .

브랜치와 병목. 게임은 브랜치지만 브랜치는 일반적으로 모든 버전의 스토리에 공통적인 이벤트를 중심으로 정기적으로 다시 합쳐집니다. 과거 선택의 효과를 없애는 것을 피하기 위해 브랜치와 병목 구조는 거의 항상 상태 추적을 많이 사용합니다(게임에서 이를 수행하지 않으면 도전을 다루고 있을 가능성이 큽니다).

드물지만 병목 현상이 눈에 띄지 않을 수도 있습니다. 줄거리가 갈라지고 결코 명확한 재결합 노드에 도달하지 않지만, 각 가지의 끝에서 선택 사항이 동일하거나 유사하여 정교한 시체 효과가 생성됩니다.

효과: 브랜치 앤 보틀넥 게임은 시간의 흐름에 크게 좌우되는 경향이 있지만, 플레이어가 상당히 강하게 이해할 수 있도록 합니다. 브랜치 앤 보틀넥 구조는 플레이어 캐릭터의 성장을 반영하는 데 가장 자주 사용됩니다. 플레이어가 다소 독특한 스토리 및/또는 개성을 구성할 수 있게 하면서도 관리 가능한 플롯을 허용합니다. 초기 게임에서는 플레이가 매우 유사하다가 이전 선택의 효과가 누적되면서 갈라지는 경향이 있습니다. 이 접근 방식이 효과를 발휘하려면 상당히 큰 부분에서 사용해야 합니다. 결과를 반영하기 전에 변화를 축적할 시간이 필요합니다.

예: 이것은 Long Live the Queen이 작동하는 방식과 거의 같으며 , Choice of Games 의 지침 원칙입니다 (Dan Fabulich는 지연된 분기라는 용어를 사용합니다 ). 또한 상당한 플롯 선택을 허용하는 비 IF 게임에서 일반적인 플롯 구조입니다.

퀘스트. 퀘스트 구조는 별개의 분기를 형성하지만, 상대적으로 적은 수의 승리 엔딩(종종 단 하나)에 도달하기 위해 다시 합쳐지는 경향이 있습니다. 이러한 분기의 요소는 모듈식 구조를 가지고 있습니다. 즉, 작고 밀접하게 그룹화된 노드 클러스터로, 각 클러스터 내부에 많은 상호 연결이 있고 외부에는 상대적으로 거의 없는 단일 상황에 접근할 수 있는 여러 가지 방법이 있습니다. 다시 병합하는 것은 꽤 흔하고, 후퇴하는 것은 덜 흔합니다. 퀘스트는 일반적으로 어느 정도의 상태 추적을 포함하며, 그렇지 않으면 성과가 좋지 않습니다. 퀘스트의 최소 크기는 비교적 크고, 이 범주에는 가장 큰 CYOA 중 일부가 포함됩니다.

효과: 이 모드는 탐험 여행에 적합하며, 설정에 초점을 맞춥니다. 퀘스트의 구조는 시간보다는 지리적 구조로 구성되는 경향이 있습니다. 사실, 이런 종류의 대부분 작품은 특정 목적을 염두에 두고 여행을 포함합니다. 퀘스트는 근거 있고 일관된 세계에 적합하지만, 그 맥락에서 플레이어 캐릭터의 상황은 끊임없이 변화합니다. 내러티브는 오래된 D&D 조우처럼 단편적이거나 에피소드적일 경향이 있습니다. 큰 그림에 큰 의미가 없을 수 있는 작은 스토리 조각입니다.

예: 파이팅 판타지 시리즈와 그 후속작( 론 울프 , 80 데이즈 ).

오픈 맵. 퀘스트가 지리적 구조로 구성되어 있지만, 시간은 여전히 중요한 역할을 합니다. 내장된 이동 방향이 있기 때문입니다. 하지만 CYOA 구조를 취하고 주요 노드 간 이동을 가역적으로 만들면 정적 지리, 즉 플레이어가 무한정 돌아다닐 수 있는 세계가 생깁니다. 종종 이는 문자적 지리이며, 내러티브 진행을 위해 명시적이든 비밀적이든 광범위한 상태 추적에 의존합니다. 하지만 하이퍼텍스트 소설 관용어에 근거한 가정이 있는 것, 즉 Le Reprobateur 와 같은 정적이지만 비선형적인 작품의 경우 드문 모드가 아닙니다 .

효과: 이것은 종종 파서 IF의 기본 스타일을 모방한 것으로 사용되지만, 일부는 전자의 D&D 뿌리에서 평행하게 파생된 것일 수 있습니다. 고전적인 맵 기반 파서 게임과 마찬가지로 내러티브는 속도가 느려지고 방향성이 떨어지는 경향이 있습니다. 플레이어는 세계를 탐험하고 파악할 여유가 더 많지만, 스토리를 진행하는 데 시간을 덜 보냅니다.

예: 듀얼마스터 , 화학 및 물리학 .

분류 모자. 초기 게임은 크게 분기되고 다시 합류합니다(분기와 병목이 여기서 유력한 모델입니다). 궁극적으로 플레이어가 어느 주요 분기에 배정되는지 결정합니다. 이러한 주요 분기는 일반적으로 매우 선형적입니다. 때로는 장갑처럼 보이지만 선택의 여지가 없는 직선일 수 있습니다. 분류 모자는 초기 게임에서 거의 항상 상태 추적에 크게 의존하며 종종 결정 지점에서 병목 현상이 발생합니다.

효과: 분류 모자는 더 개방적인 포맷의 폭과 선형적인 포맷의 깊이 사이의 타협입니다. 때때로 다양한 분기의 특성이 플레이어에게 신호로 전달됩니다. 사실, 이것은 플레이어가 후반부의 선형성을 알아차릴 가능성이 높고 모든 선택이 궁극적으로 특정 스레드로 흘러들어갈 것이라고 생각할 수 있기 때문에 중요합니다. 플레이어는 스토리가 어떻게 진행되는지에 많은 영향을 받지만, 작가는 결국 여러 개의 다른 게임을 써야 할 수도 있습니다.

예: 카타와 쇼조 ; 마법의 화장 .

플로팅 모듈. 컴퓨터 기반 작품에서만 실제로 가능한 모드입니다. 나무가 없습니다. 또는 흩어진 나뭇가지와 가지가 있을 수 있지만 줄기가 없습니다. 중심 플롯도 없고, 관통선도 없습니다. 모듈형 조우는 주로 상태에 따라 또는 무작위로 플레이어에게 제공됩니다.

효과: 이 스타일은 쓰기에 도전적인데, 직관적으로 이해하기 어렵기 때문입니다. 작가들은 더 통합된 구조로 빠르게 회복하는 경향이 있고, 이전 이벤트에 대한 가정이 거의 없기 때문입니다. 많은 양의 콘텐츠가 없으면 이 방법은 선형 시스템으로 붕괴되는 경향이 있습니다. 플레이 메커니즘은 주로 세계를 협상하기 위해 통계를 변경하는 것에 관한 것이기 때문에 플레이어에게 이러한 통계를 노출하는 데 강력한 인센티브가 있습니다. 통계에 영향을 미치도록 선택된 반복 이벤트(그라인딩)는 기능일 수 있습니다.

플로팅 모듈에는 다양한 접근 방식이 있습니다. Emily Short는 여기에서 잠정적인 분류를 제시합니다 .

예: 모듈형 디자인의 순수한 예는 비교적 드뭅니다. 시카고의 왕 (Sean Barrett에게 경의를 표합니다)은 초기의 예입니다. StoryNexus 와 그 개념적 친척(예: Bee )은 이 공간에 거주하지만, 일반적으로 선형 진행 구조를 더 많이 부과합니다. (Alexis Kennedy는 일반적인 접근 방식을 설명하기 위해 품질 기반 내러티브라는 용어를 사용합니다 . '파이프나 복잡한 기계가 아닌 모자이크 타일과 같은 스토리 조각.')

루프 앤 그로우. 이 게임은 어떤 종류의 중심 스레드가 있는데, 이 스레드는 같은 지점까지 반복해서 돌지만, 상태 추적 덕분에 매번 새로운 옵션이 잠금 해제되고 다른 옵션은 닫힐 수 있습니다. 이는 매우 일반적인 패턴이며, 다른 많은 패턴과 공존할 수 있습니다. 예를 들어, Trapped in Time 은 기본적으로 사이클 앤 그로우잉 Gauntlet입니다. Bee 는 1년 동안 루프 구조로 떠다니는 모듈의 특성을 길들입니다.

효과: Loop and Grow는 서사적 모멘텀을 유지하면서도 세계의 규칙성을 강조합니다. 서사의 전체 섹션이 반복될 수 있는 이유에 대한 정당화가 필요합니다. 플레이어 캐릭터는 종종 익숙한 공간에서 일상적인 활동을 따르거나, 시간 여행을 하거나, 특정 수준의 추상화에서 작업을 수행합니다. 이러한 규칙성은 종종 개방성의 대가로 제공됩니다. 강력한 Loop and Grow 구조를 가진 많은 스토리는 구속이나 침체에 맞서 싸우는 내용을 포함합니다.

루프 앤 그로우 구조의 중요한 변형은 스포크와 허브입니다. 게임에는 여러 가지 주요 분기가 있지만 모두 중앙 노드 또는 노드 집합에서 시작하여 돌아갑니다. 플레이어는 각 스포크를 따라 한 번 또는 여러 번 나갈 수 있습니다.

[출처] https://heterogenoustasks.wordpress.com/2015/01/26/standard-patterns-in-choice-based-games/

Standard Patterns in Choice-Based Games

Posted on January 26, 2015 by Sam Kabo Ashwell

When I was analysing the structures of CYOA works a few years back, I began to recognise some strong recurring design patterns. I came up with some home-brewed terminology, but didn’t ever lay it out in a nice clear way. This is a non-exhaustive look at some of the more common approaches, somewhat-updated (a lot has changed since then).

I should stress that these aren’t discrete categories: while a lot of works will fall very straightforwardly into a single pattern, many will involve elements of multiple patterns. (And yes, I’m aware that you can often simulate one using the mechanics of another. That’s mostly beside the point.) Also, the example diagrams I’m using are smaller and simpler than would be likely in actual works.

Time Cave. A heavily-branching sequence. All choices are of roughly equal significance; there is little or no re-merging, and therefore no need for state-tracking. There are many, many endings.

Effects: The time cave is the oldest and most obvious CYOA structure. It is often good for narratives about freedom and open possibility, adventures that could go anywhere, flights of fancy. Time caves tend to have relatively short playthroughs, but strongly encourage replay: they are broad rather than long. Even with multiple playthroughs, most players will probably miss a good deal of the content.

The time cave’s structure is both organised by chronological progression and detached from it. It’s ungrounded by regularity: possibility is so open that it often becomes fantastic or surreal, with different branches occupying wholly different realities. The player has velocity but little grasp, vast freedom but little ability to comprehend it.

Examples: Edward Packard’s earlier work (The Cave of Time, Sugarcane Island), Emily Short’s A dark and stormy entry; Pretty Little Mistakes.

Gauntlet. Long rather than broad, gauntlets have a relatively linear central thread, pruned by branches which end in death, backtracking, or quick rejoining. The Gauntlet generally tells one anointed story, which can be adorned with optional content or prematurely ended with failure; if there are multiple endings, they’re likely to derive from a Final Choice. Gauntlets rarely rely on state to any great extent (if they do, they are likely to evolve into a branch-and-bottleneck structure.)

Effects: The player is likely to realise that they are on a constrained path, but the presentation of side-branches matters a great deal – do they mean death? incorrect answers? travel back in time? blocked paths, footnotes, or scenic details? Most often, the gauntlet creates an atmosphere of a hazardous, difficult or constrained world. Sometimes this can be punishing or depressing; sometimes it can be darkly comic; sometimes it’s a sign that you’re in a work heavily dependent on reflective or rhetorical choice. Perhaps the easiest structure to author, gauntlets can be conceived of in similar terms to linear stories, and ensure that most players will see most of the important content.

There are two major varieties of gauntlet: deadly and friendly. Deadly gauntlets mostly prune the tree with failure; friendly ones mostly do so with short-range rejoining, and look a bit more like simple branch-and-bottleneck structures. Friendly gauntlets have been vastly more common in recent years, making up a high proportion of Twine works.

Examples: Zork: The Forces of Krill. Our Boys In Uniform.

Branch and Bottleneck. The game branches, but the branches regularly rejoin, usually around events that are common to all versions of the story. To avoid obliterating the effect of past choices, branch-and-bottleneck structures almost always rely on heavy use of state-tracking (if a game doesn’t do this, chances are you are dealing with a gauntlet).

Somewhat rarely, the bottlenecks may be invisible – the plot branches and never reaches an explicit rejoining node, but the choices at the end of each branch are the same or similar, creating an exquisite-corpse effect.

Effects: Branch-and-bottleneck games tend to be heavily governed by the passage of time, while still allowing the player fairly strong grasp. The branch-and-bottleneck structure is most often used to reflect the growth of the player-character: it allows the player to construct a somewhat-distinctive story and/or personality, while still allowing for a manageable plot. There’s a tendency – not a necessary one, by any means – for playthroughs to be very similar in the early game, then diverge as the effects of earlier choices accumulate. In order for the approach to work, it has to be used in a fairly large piece; you need time to accumulate change before producing results that reflect it.

Examples: This is pretty much how Long Live the Queen works, and is the guiding principle of Choice of Games (Dan Fabulich uses the term delayed branching). It’s also a common plot structure in non-IF games that allow significant plot choices.

Quest. The quest structure forms distinct branches, though they tend to rejoin to reach a relatively small number of winning endings (often only one). The elements of these branches have a modular structure: small, tightly-grouped clusters of nodes allowing many ways to approach a single situation, with lots of interconnection within each cluster and relatively little outside it. Re-merging is fairly common; backtracking rather less so. Quests generally involve some level of state-tracking, and do poorly when they don’t. The minimal size for a quest is relatively large, and this category includes some of the largest CYOAs.

Effects: This mode is well-suited for journeys of exploration, focused on setting; the quest’s structure tends to be organised by geography rather than time. Indeed, most works of this kind involve a journey with a specific purpose in mind. Quests work well for grounded, consistent worlds, but within that context the player-character’s situation is constantly changing. The narrative tends to be fragmentary or episodic, like old-school D&D encounters: little chunks of story which might not have any great significance for the big picture.

Examples: The Fighting Fantasy books and their descendants (Lone Wolf, 80 Days).

Open Map. Even though quests are structured by geography, time still plays an important part: there’s a built-in direction of travel. But take a CYOA structure, make travel between the major nodes reversible, and you have a static geography, a world in which the player can toodle about indefinitely. Often this is a literal geography and relies on extensive state-tracking both explicit and secret for narrative progress. But it’s not an uncommon mode for things with assumptions grounded in the hypertext-novel idiom – static but non-linear works like Le Reprobateur.

Effects: This is often used as an imitation of the default style of parser IF, although some may be parallel derivation from the former’s D&D roots. As with classic map-based parser games, the narrative tends to become slower-paced and less directed; the player has more leisure to explore and grasp the world, but spends less of their time advancing the story.

Examples: Duelmaster; Chemistry and Physics.

Sorting Hat. The early game branches heavily and rejoins heavily (branch-and-bottleneck is a likely model here), ultimately determining which major branch the player gets assigned to. These major branches are typically quite linear – sometimes they look like gauntlets, but they might be choiceless straight-shots. Sorting Hats almost always rely substantially on state-tracking in the early game, and often bottleneck at the decision point.

Effects: The Sorting Hat is a compromise between the breadth of more open formats and the depth of linear ones. Sometimes the nature of the various branches is signaled to the player; this is kind of important, in fact, because the player is pretty likely to notice the linearity of the second half and might assume that all of their choices will ultimately get funneled into that particular thread. The player gets a lot of influence over how the story goes; however, the author may end up effectively having to write several different games.

Examples: Katawa Shoujo; Magical Makeover.

Floating Modules. A mode only really possible in computer-based works. There is no tree – or, while there may be scattered twigs and branches, there’s no trunk. No central plot, no through-line: modular encounters become available to the player based largely on state, or perhaps randomly.

Effects: This is a challenging style to write for, both because it’s difficult to intuitively grasp – writers tend to rebound quickly to a more unified structure – and because few assumptions can ever be made about prior events. Without a large amount of content, the method tends to collapse into a linear system. Because play mechanics are largely about altering stats in order to negotiate a world, there’s a strong incentive to expose those stats to the player; repeated events chosen only to affect a stat (grinding) may be a feature.

There are different approaches to floating-module: Emily Short has a tentative categorisation here.

Examples: Pure examples of modular design are relatively rare. King of Chicago (hat-tip Sean Barrett) is an early example. StoryNexus and its conceptual relatives (e.g. Bee) inhabit this space, though they generally impose some more linear-progression structure on it. (Alexis Kennedy uses the term quality-based narrative to describe the general approach: ‘pieces of story like mosaic tiles, not pipes or complex machinery.’)

Loop and Grow. The game has a central thread of some kind, which loops around, over and over, to the same point: but thanks to state-tracking, each time around new options may be unlocked and others closed off. This is a very general pattern, and can co-exist with many others. Trapped in Time, for instance, is basically a cycle-and-growing Gauntlet; Bee tames its floating-module nature with a year-long loop structure.

Effects: Loop and Grow emphasizes the regularity of the world while retaining narrative momentum. A justification is needed for why whole sections of narrative can repeat: the player-character is often following routine activities in a familiar space, engaged in time-travel, or performing tasks at a certain level of abstraction. This regularity often comes at the price of openness: many stories with a strong Loop and Grow structure involve a struggle against confinement or stagnation.

An important variation of loop-and-grow structures is spoke and hub: the game has several major branches, but they all originate at and return to a central node or set of nodes. The player may go out along each spoke once, or many times.

Examples: Bee, Trapped in Time, Solarium.

[출처] https://heterogenoustasks.wordpress.com/2015/01/26/standard-patterns-in-choice-based-games/

멀티플랫폼 게임개발

[react native] 2025년 리액트 네이티브로 프로젝트 시작하기

[react native] 2025년 리액트 네이티브로 프로젝트 시작하기

2025년 리액트 네이티브로 프로젝트 시작하기

배경

React Native를 선택한 이유

1. 비교적 낮은 러닝커브

2. 새로운 아키텍처와 함께 개선된 성능

3. Expo 프레임워크를 통해 얻을 수 있는 이점

Expo를 통한 RN 프로젝트 시작하기

개발 환경 설정

Expo CLI vs RN CLI 선택 가이드

Expo CLI의 장점

React Native CLI의 장점

프로젝트 생성 및 구조

주요 특징

필수 라이브러리 설정

네비게이션

상태 관리

스타일링

결론

참고할만한 리소스

[no code 게임개발] PlayMaker 요약

[no code 게임개발] PlayMaker 요약

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (4) DSE 를 이용해 이벤트 만들기 (2) : 미연시 만들기

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (4) DSE 를 이용해 이벤트 만들기 (2) : 미연시 만들기

event.어쩌구() 함수 이용하기

event.once()

event.solo()

event.only()

event.happened(*이벤트) 와 event.depends(*이벤트) 그리고 call events_end_day

event.random(확률)

event.choose_one(group, group_count = 1)

끝

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (3) DSE 를 이용해 이벤트 만들기 (1)

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (3) DSE 를 이용해 이벤트 만들기 (1)

event() 해석

이벤트 만들기

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (2) 스크린 언어로 스케쥴 화면 만들기

[Ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (2) 스크린 언어로 스케쥴 화면 만들기

필요한 게 뭘까

스탯창

스케쥴 설정 화면

[ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (1) 기초 스크립트 작성

[ren'py] 렌파이로 육성 시뮬레이션 게임 만들기 (1) 기초 스크립트 작성

준비물

예제 게임 기초 설정

세부사항 정하기

스크립트 대충 적기

[flutter (플루터 앱 개발)] Dart와 Flutter를 ChatGPT에게 배우다.

[flutter (플루터 앱 개발)] Dart와 Flutter를 ChatGPT에게 배우다.

[ 설치 ]

[ 변수 ]

[ 조건문/반복문 ]

[ 함수 ]

[ 클래스/인터페이스 ]

[ 네트워킹 ]

[ 소켓통신 ]

[ 탭 메뉴 예제 ]

[ Flame ]

[ Flame > Box2D 물리엔진 ]

[ 3D ]

[ Flutter 커뮤니티 ]

[flutter (플루터 앱 개발)] Flutter PDF 뷰어를 만드는 방법 : How to build a Flutter PDF viewer

[flutter (플루터 앱 개발)] Flutter PDF 뷰어를 만드는 방법 : How to build a Flutter PDF viewer

Flutter에 적합한 PDF 패키지 선택

flutter_pdfview로 PDF 뷰어 구축

시작하기

1단계 - 새로운 Flutter 프로젝트 생성

2단계 - flutter_pdfview 종속성 추가

3단계 - Android 및 iOS 구성 업데이트

4단계 - PDF 뷰어 위젯 만들기

5단계 - 샘플 PDF 추가

6단계 - 앱 실행

결론

자주 묻는 질문

Choosing the right PDF package for Flutter

Building a PDF viewer with flutter_pdfview

Getting started

Step 1 — Creating a new Flutter project

event.happened(이벤트) 와 event.depends(이벤트) 그리고 call events_end_day