본문 바로가기

Programming241

자바GUI(Swing) - Simple text editor 인텔리제이(Intellij) IDE 를 사용하여 간단한 텍스트 에디터를 만들어보도록 하겠습니다. 1. 새 프로젝트 생성 인텔리제이 메뉴에서 File - New - Project 를 클릭하여 새 프로젝트를 생성해줍니다. Name은 editor로 하고, 적당한 위치에 아래와 같은 세팅으로 진행할 예정입니다. JDK는 설치되어있지 않다면 JDK의 드롭다운 메뉴 중 Download JDK를 눌러, 적당한 버전을 고른 후 다운로드 받아줍니다. 혹은 직접 원하는 JDK를 다운로드 받아서 선택할 수도 있습니다. 2. Main Class 생성 프로젝트 하위 폴더 중 src에서 우클릭하여 New - Java Class 를 클릭한 후, 클래스 이름을 editor로 하여 새로운 클래스를 생성해줍니다. 만들어진 클래스 내부에.. 2022. 7. 11.
Linux용 음악 프로그램 QMMP - 설치부터 스킨 변경까지 linux를 처음 알고 시작했을 당시만해도 xmms라는 콘솔에서 실행하는 프로그램을 설치하고 음악을 듣곤 했었는데, 거기서부터 파생된 gui형태의 프로그램들이 많이 나온것 같습니다. xmms2도 있었고, audacious라는 프로그램을 최근까지도 메인으로 사용하고 있었는데, 얼마전 qmmp라는 또다른 프로그램을 알게 되었습니다. 이름에서 알 수 있듯이 QT기반의 프로그램 이라고 합니다. 어떤 녀석인지 한 번 설치해 보도록 하겠습니다. 현재 제 데스크탑에는 ubuntu 20.04 lts가 설치되어 있습니다. 그래서 ubuntu package manager로 가서 qmmp를 찾아봅니다. 2개가 나오는데 어떤걸까요? 아래쪽이 1.5 버전이라고 되어있어서 아래쪽 프로그램을 설치하겠습니다. 설치하고 나니 보이긴 .. 2022. 7. 3.
자바GUI(JavaFX) - CSS파일 적용 JavaFX에서 css파일을 적용하는 방법에 대해 알아보겠습니다. 1. CSS 파일 추가 "resources - 프로젝트이름폴더" 하위에 css파일을 추가합니다. 샘플로 darktheme.css라고 이름지었습니다. 2. CSS파일 적용 HelloApplication클래스의 Scene 선언부 바로 뒤에 darktheme을 불러오는 코드를 추가합니다. package com.example.test07; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; import javafx.stage.Stage; import java.io.IOException; public class HelloAppl.. 2022. 6. 26.
자바GUI(JavaFX) - Gradle 환경에서 외부 라이브러리 추가하기 IntelliJ에서 JavaFX 프로젝트 생성을 할 때 Maven 또는 Gradle 빌드환경을 선택하도록 되어있습니다. Gradle환경에서 외부 라이브러리 추가하는 방법에 대해 알아보겠습니다. 1. build.gradle 파일 수정 Gradle 환경으로 프로젝트를 생성하고 외부 Library를 추가할 때에는 build.gradle파일의 dependencies 부분에 인식시켜줘야 합니다. dependencies { implementation files("libs/gson-2.9.0.jar") // 라이브러리 추가부분 implementation files("libs/aquafx-0.1.jar") // 라이브러리 추가부분 testImplementation("org.junit.jupiter:junit-jupit.. 2022. 6. 25.
Electron-vue 보일러플레이트 만들기 1. Vue 프로젝트 시작 vue create . //폴더를 먼저 만들고 해당 폴더를 프로젝트 폴더로 하여 생성 2. Electron-Builder 설치 이거 설치하고 테스트를 해본다. vue add electron-builder 3. 배포 테스트 npm run electron:build 4. Router 설치 vue add router - App.vue파일이 자동으로 업데이트 됨 Home About - ./views/HomeView.vue와 /views/AboutView.vue 파일이 자동 생성됨- - ./router/index.js 파일이 자동 생성됨 5. Bootstrap-vue 설치 npm install bootstrap-vue bootstrap Bootstrap-vue 설정 (main.js) i.. 2022. 6. 22.
Vue3 + bootstrap5 1. 설치 npm i --save bootstrap npm i --save @popperjs/core // 부트스트랩 실행에 필요 2. main.js에 두줄만 Import하면 됨 import { createApp } from 'vue' import App from './App.vue' import router from './router/index.js' import store from './store/index.js' // import mixins from './mixins/index.js' // 아래 두줄만 넣으면 된다. import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap' createApp(App) .use(router) .use(stor.. 2022. 5. 28.
Vuex 사용 state : data getters : computed mutations : methods actions : methods(비동기) Vuex action에서의 활용 context.state context.getters context.commit (mutation의 함수 사용시) context.dispatch (action의 함수 사용시) Vue 컴포넌트에서 Vuex Helper 사용 ...mapState('모듈',[ '상태1','상태2' ]) ===> computed에서 사용 ...mapGetters('모듈',[ '상태1','상태2' ]) ===> computed에서 사용 ...mapMutations('모듈',[ '상태1','상태2' ]) ===> methods에서 사용 ...mapActions('모듈.. 2022. 5. 24.
Vue 프로젝트 - Movie페이지 단일영화 상세정보 및 skeleton UI작성 1. routes 수정 /movie/#123456과 같이 ID를 입력받을 수 있도록 수정 import { createRouter, createWebHashHistory} from 'vue-router' import Home from './MyHome.vue' import Movie from './MyMovie.vue' import About from './MyAbout.vue' export default createRouter({ // Hash, History --> Hash mode 사용 예정 history: createWebHashHistory(), // pages routes:[ { path:'/', component: Home }, { path:'/movie/:id', component: Movi.. 2022. 5. 22.
Vue 영화검색사이트 기본 설치 파일 1.라이브러리 설치 npm i vue-router vuex bootstrap@5 npm i -D node-sass sass-loader 2. bootstrap 커스터마이징 - scss/main.scss 작성 - 오류 방지를 위해 maps는 주석 처리 // Required @import "../../node_modules/bootstrap/scss/functions"; // Default variable overrides $primary:#FDC000; //variables가 실행되기 전에 재정의되어야 함 // Required @import "../../node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/mix.. 2022. 5. 14.
Vue Tailwind CSS 적용하기 1. 설치 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 2. 활성화 npx tailwindcss init -p 3. ./tailwind.config.js환경설정 module.exports = { // content: [ // "./index.html", // "./src/**/*.{vue,js,ts,jsx,tsx}", // ], purge:[ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [], } 4. src/index.css 파일 생성 @import "tailwindcss/base"; @import "tailwindcs.. 2022. 5. 13.
Vue apache 배포 오류 Vue로 작성한 프로그램을 Build를 하고... npm run build /dist/ 폴더의 파일들을 아파치 폴더에 옮겼는데, 빈 화면이 나옵니다. index.html 파일은 보이는데 개발자 화면 확인해보니...js파일과 css파일의 경로를 인식을 못했습니다. "/js/chunk-vendors....."처럼 되어있는데, 혹시나 해서 "."을 붙여보니 작동이 됩니다. 동일한 오류 겪고계신 분께서는 한번 시도해보시길 바랍니다. 2022. 5. 12.
Godot사용팁 - path2D Path2D노드 사용법에 대해 알아보겠습니다. Path2D노드를 사용하면 단순히 움직이는 캐릭터들(Enemy 나 NPC 등)의 단순 이동동작을 최소한의 코딩으로 구현할 수 있는 유용한 노드입니다. 1. 적당한 Enemy 노드가 있을 경우, 전체 동작하는 Scene에서 아래와 같이 구성을 하였습니다. Path2D노드는 하위에 항상 PathFollow2D를 자식으로 담고 있어야 합니다. Path2D노드가 포인트를 이용하여 라인을 생성하는 노드라면, PathFollow2D노드는 그 선을 어떤 방식으로 따라가는지를 설정하는 노드입니다. 2. Path2D노드를 다시 선택하면 아래 그림과 같이 에디터 상단에 포인터 추가/삭제/편집할 수 있는 버튼이 활성화됩니다. 적당히 이동 경로를 그려줍니다. 이 중 5번째 아이콘.. 2022. 3. 14.
Godot사용팁-AnimationTree노드의 Blendmode2D로 애니메이션 컨트롤 오늘은 AnimationTree노드에 대해 알아보겠습니다. 처음 캐릭터의 애니메이션을 만들면 AnimationPlayer노드를 많이 사용하는데요, 이 노드만 이용해서 각종 상태를 코드로 컨트롤하려면 좀 힘듭니다. 많이 힘듭니다. 머리는 쥐가나고, 코드는 스파게티가 되고, 뭐 하나라도 추가하려면 완전... 그래서 여기서도 똑똑하신분이 상태 관리하라고 노드를 하나 주셨는데, 그게 바로 AnimationTree노드입니다. AnimationTree노드를 사용하려면 각각의 동작 Animation은 사전에 구현이 되어있어야합니다. 이미 존재하는 Animation을 컨트롤하는 상태관리자라고 보시면 됩니다. 참고로 저는 코로나 격리기간 중에 아래와 같은 게임을 7살 딸과 함께 만드는 중이었습니다. 탑다운 방식이다보니 .. 2022. 3. 12.
Godot GUI프로그래밍 예제 - 시계만들기 1. Display Size를 (400,500)으로 세팅합니다. 2. Borderless를 설정합니다. 3. Per Pixel Transparency를 Allowed, Enabled 로 바꿉니다. 4. 노드 구성 - clock (control) ㄴ ColorRect (ColorRect) ㄴ Body (sprite) : 시계 몸체 이미지 ㄴ pivot_h (Node2D) ㄴ Hour (sprite) : 시침 이미지 ㄴ pivot_m (Node2D) ㄴ Minute (sprite) : 분침 이미지 ㄴ pivot_s (Node2D) ㄴ Second (sprite) : 초침 이미지 5. Body는 앱 중앙에 위치시키고, pivot들은 Body의 중앙에, pivot 내부의 sprite이미지들은 위와같이 정렬해줍니.. 2022. 2. 24.
Godot GUI 프로그래밍 - 컨테이너 GUI에서 레이아웃을 구성할 때 앵커를 이용해서 다양한 종횡비를 처리할 수도 있습니다만, 좀더 효과적으로 내부 요소들을 배치하기 위해서는 컨테이너가 필요합니다. 컨테이너 노드를 사용하면 모든 자식 노드는 자신의 지정된 위치가 무시됩니다. 즉, 컨테이너가 위치를 제어하게 되고, 컨테이너의 크기가 조정되면 모든 자식 노드가 그에 따라 재배치되며 사용된 컨테이너 유형에 따라 동작합니다. HBoxContainer 가 자식 버튼 의 크기를 조정 하는 예입니다. Size Flag 컨테이너에 노드를 추가할 때 컨테이너가 각 자식을 처리하는 방식은 주로 Size Flag에 따라 다릅니다 . Size Flag는 컨테이너의 자식노드(컨트롤 노드)의 inspector에서 찾을 수 있습니다. 크기 플래그는 수직 및 수평 크기.. 2022. 1. 25.
C#(WPF) 프린트 - 단순 출력부터 다이얼로그 없이 출력하기까지 https://www.c-sharpcorner.com/uploadfile/mahesh/printing-in-wpf/ Printing in WPF This article discusses the process of printing in WPF and how to print a FlowDocument, Control, and Window in WPF. www.c-sharpcorner.com 1. 단순 출력 기초 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls;.. 2022. 1. 14.
Godot 엔진 시작하기 - Signal Signal 소개 Signal은 옵저버 패턴의 Godot버전입니다. 특정 이벤트가 발생하면 노드는 신호를 보낼 수도 있고, 다른 노드는 그 신호에 응답할 수도 있습니다. 예로, 버튼이 눌려 있는지 매 프레임마다 확인하는 대신 버튼이 눌렸을 때 Signal을 보낼 수 있습니다. 타이머 예 Timer 노드를 이용한 예제를 살펴보겠습니다. Node2D와 두 개의 자식(Timer 및 Sprite )이 있는 새 씬을 만듭니다 . 씬독에서 Node2D의 이름은 TimerExample로 바겠습니다. Sprite의 텍스처에는 LoadSprite의 Texture 속성 드롭다운 메뉴에서 Godot 아이콘이나 원하는 다른 이미지를 할당합니다. 루트 노드에 스크립트를 첨부하되 아직 코드를 추가하지 마십시오. 씬 트리는 아래와.. 2022. 1. 12.
Godot 엔진 시작하기 - 스크립팅 2 스크립팅(계속) Processing 대부분의 스크립트는 매 프레임에서 처리되어야 합니다. 처리에는 idle(유휴상태) 처리와 physics(물리) 처리의 두 가지 유형이 있습니다. Idle 처리는 Node._process() 메서드가 스크립트에서 발견되면 활성화됩니다. Node.set_process() 함수로 켜고 끌 수 있습니다. 이 메서드는 프레임이 그려질 때마다 호출됩니다. func _process(delta): # Do something... pass _process() 함수가 호출 빈도는 실행 중인 애플리케이션의 FPS(초당 프레임 수)에 따라 다릅니다. 이 비율은 실행 시점마다, 또는 장치에 따라 다를 수 있습니다. delta매개변수에는 _process()를 호출한 이전 시점부터 경과된 시간(.. 2022. 1. 12.
Godot 엔진 시작하기 - 스크립팅 스크립팅 언어 사용 가능한 스크립팅 언어 Godot는 GDNative 기술을 통해 GDScript, C#, VisualScript, C++ 의 4가지 게임플레이 프로그래밍 언어를 공식적으로 제공합니다 . 커뮤니티에서 지원하는 언어로 Python, Lua, Rust 등도 있습니다. 단일 프로젝트에서 여러 언어를 사용할 수 있습니다. 예를 들어 팀에서 GDScript로 게임 플레이 로직을 코딩할 수 있습니다. 작성 속도가 빠르기 때문에 레벨 디자이너가 그래픽 언어 VisualScript로 퀘스트를 스크립팅하도록 하고, C# 또는 C++를 사용하여 복잡한 알고리즘을 구현하고 성능을 극대화할 수 있습니다. 또는 GDScript 또는 C#으로 모든 것을 작성할 수 있습니다. 어떤 언어를 사용해야 하는가? GDSc.. 2022. 1. 12.
Godot 엔진 시작하기 - 인스턴스 생성 요약 인스턴싱은 편리함이 많습니다. 장면을 세분화하고 관리하기 쉽게 만드는 기능. 여러 노드 인스턴스를 한 번에 관리하고 편집하는 기능. 복잡한 게임 흐름 또는 UI를 나누어 구성하고 포함하는 기능. (Godot에서 UI 요소도 노드(장면)임). 소개 Scene & Node 에서 씬은 하나의 루트 노드에서 시작되는 트리 구조의 노드 모음임을 배웠습니다. 원하는 만큼 장면을 만들어 디스크에 저장할 수 있습니다. 이러한 방식으로 저장된 장면을 "Packed Scene"이라고 하며 .tscn 확장자의 파일로 저장됩니다. 씬이 저장되면 다른 씬에서 노드처럼 인스턴싱 할 수 있습니다. 위 그림에서 Scene B는 Scene A에 인스턴스로 추가되었습니다. 인스턴싱 예시 샘플 프로젝트: instancing.zip... 2022. 1. 12.
Godot 엔진 시작하기 - Node 와 Scene Node(노드) 노드는 게임 구축의 기본 블록입니다. 이미지를 표시하고, 사운드를 재생하고, 카메라 뷰를 표현하는 등 수행할 수 있는 기능에 따라 수십가지 종류가 있습니다. 모든 노드에는 다음 속성이 있습니다. 이름. 편집 가능한 속성. 매 프레임마다 업데이트될 콜백함수 새로운 속성과 기능으로 확장 다른 노드에 자식으로 추가 마지막 속성이 키포인트입니다. 여러 다른 기능의 노드를 결합하면 더 복잡한 동작을 하는 노드가 생성됩니다. 이전에 보았듯이 "Character" 노드는 KenematicBody2D 노드, Sprite2D 노드, Camera2D 노드 및 CollisionShape2D 노드를 사용하여 카메라가 따라가며 뷰가 전환되는 캐릭터를 만들 수 있었습니다. Scene(장면) 캐릭터 씬과 같이 하나.. 2022. 1. 12.
Godot 엔진 시작하기 - 에디터 [Godot 엔진 다운로드] 프로젝트 매니저 Godot를 실행하면 가장 먼저 보게 될 창은 프로젝트 매니저입니다. 최초 실행시에는 프로젝트가 없으므로 애셋 라이브러리를 열 것인지 묻는 팝업이 표시됩니다. 우선 취소하고 신규 프로젝트 생성을 하겠습니다. 이제 프로젝트 관리자가 표시되면 게임 프로젝트를 생성, 제거, 가져오기 또는 시작(열기)할 수 있습니다. 오른쪽 상단에는 편집자의 언어를 변경할 수 있는 드롭다운 메뉴가 있습니다. 애셋 라이브러리 프로젝트 탭에서 오픈 소스 프로젝트 템플릿과 데모를 다운로드하여 빠른 시작을 할 수 있습니다. 원하는 템플릿이나 데모를 선택하여 다운로드가 완료되면 설치를 클릭하고 프로젝트 경로를 선택하면 됩니다. 프로젝트 생성 또는 가져오기 새 프로젝트를 생성하려면 오른쪽에 있.. 2022. 1. 12.
Godot 엔진 시작하기 - Godot(Godette) 엔진이란 Godot엔진에 대해 알아보겠습니다. 이름(...이라기보다는 발음)에 대한 논란이 지속적으로 발생하여 새로운 이름에 대해 커뮤니티를 중심으로 끊이지 않자, 최근 새로운 이름 Godette로 변경하였습니다. 아울러 마스코트도 이상한 톱니머리 얼굴이 아닌 예쁘장한 여학생 캐릭터를 만들었는데요. 머리에 뿔은 이 엔진의 동질성일까요? 계속 동일한 뿔모양을 가져가는 모습입니다. 본 포스팅에서는 기존부터 익숙히 알고 있던 이름인 관계로 Godot라는 명칭을 사용하겠습니다. 아르헨티나에 본사를 둔 OKAM이라는 회사에서 인하우스 툴로 사용하던 게임엔진으로 이를 MIT 라이센스하에 오픈소스로 배포한 것이라고 합니다. 주요 특징으로는 1. 완전 무료 MIT 라이센스 하에 배포되다보니 다른 제한사항도 없고 사용은 물론 수.. 2022. 1. 12.
고도엔진 2D 슈팅게임 - 12 최고점과 Saving - stage_menu.tscn에서 새 스크립트를 추가 - game.gd로 저장 - Project Settings > Autoload 에 game.gd파일 추가 - hud에 최고기록을 표시하는 라벨 추가 - stage_game.tscn > tex_score 노드 추가 - 노드 이름을 tex_bestscore로 변경 - 스크립트를 clear해주고, 다시 builtin script 추가 - 스크립트 이름을 tex_bestscore로 지정 - stage_game.tscn씬 > tex_score노드 > tex_score스크립트 수정 ...길다.... - 끝 - 2022. 1. 8.
고도엔진 2D 슈팅게임 - 11 Sounds - 새로운 씬 생성 - 빈 Node 추가 후 audio_player로 이름 변경, audio_player.tscn으로 저장 - SamplePlayer노드 추가 후 sample_player로 이름 변경 - sample > New SampleLibrary > Edit 로 에디트 모드 진입 - Open > sounds폴더의 모든 음원을 전부 선택하여 열기 - Polyphony: 15 설정 - Music 추가하기 - StreamPlayer노드 추가 후 stream_player 로 이름 변경 - sounds폴더의 music.ogg파일 추가 - Loop와 Autoplay에 체크하여 시작 후 계속 플레이되도록 설정 - audio_player.gd 스크립트 추가 - audio_player씬을 프로젝트 어디에서든 불러올.. 2022. 1. 8.
고도엔진 2D 슈팅게임 - 10 Power Up - 새로운 씬 생성 후, Area2D노드 추가 - 이름을 powerup으로 변경 후 powerup.tscn으로 저장 - Sprite노드 추가 후 이름을 sprite로 변경 - CollisionShape2D노드 추가 후 이름을 shape으로 변경 - New RectangleShape2D 지정 - Extends: (7,7)로 변경 - powerup노드에 powerup.gd스크립트 추가 - 상속씬으로부터 만들기 > powerup.tscn선택 - 이름을 powerup_armor로 변경하고 powerup_armor.tscn으로 저장 - 기존의 스크립트를 제거 - powerup_armor.gd스크립트 새로 추가 스크립트 수정 - 새로운 상속씬 생성 - powerup.tscn을 상속하여 powerup_laser.ts.. 2022. 1. 8.
고도엔진 2D 슈팅게임 - 9 HUD & Menu - ship.gd스크립트 수정 - armor_changed 시그널 추가 - set_armor함수에 emit_signal 추가 - Canvas2D노드 추가 후 hud로 이름 변경 - 하위에 sprite노드 추가 후 spr_armor로 이름 변경 - Sprite Texture에 armor.png파일 지정 - Centered는 해제하고, - 총 수평방향으로 5개의 프레임이 존재(Hframes:5) 인식 - 현재 프레임은 4번째 프레임을(Frame: 4)인식시켜준다. - spr_armor노드에 스크립트 추가 > Built-In-Script형태로 추가해준다. - TextureFrame노드를 추가 후 tex_score로 이름 변경 - Texture에 score.png 파일 추가 - 노드 사이즈를 적절히 조정 후 P.. 2022. 1. 8.
고도엔진 2D 슈팅게임 - 8 카메라 진동 - world씬에 camera2D노드 추가 - 카메라 스크립트 추가 수정 수정 수정 - 새로운 씬 생성하고 sprite노드를 추가하여 flash라고 이름을 바꿔 flash.tscn으로 저장한다. - Texture에 rectangle.png파일을 지정하고 - Centered를 해제한 뒤, 화면 사이즈보다 약간 크게 확장한다. - Modulate에 빨간색을 지정한다. - Z값을 15로 지정한다. - 하위노드로 Merge from Scene > flare.tscn > anim노드를 추가한다. - Make Sub-Resources Unique로 고유하게 변경한다. - 재생 길이를 0.3으로 변경하고 마지막 프레임도 0.3 위치에 놓는다. - 다시 0프레임에 위치시킨 후 스크립트를 추가한다. - 적용을 위해 sh.. 2022. 1. 8.
고도엔진 2D 슈팅게임 - 7 폭발 애니메이션 - 새로운 씬 생성 - sprite노드 추가 후 explosion 으로 변경 - Texture 지정 - Z 값을 5 정도로 상향 조정 - explosion에 하위노드로 Particles2D 노드 추가 - 이름을 p_smoke로 변경 - 각종 파라미터 적절히 변경 - Texture 를 클릭하여 smoke.png를 할당 - 추가 설정 - 추가 설정 - 추가 설정 - emmiting 기능으로 애니메이션 확인 - p_smoke 노드를 복사하여 p_flare노드 생성 - Texture에 flare.png파일을 할당하여 애니메이션 확인 - 노드 추가 > Merge from scene > flare.tscn 선택 - anim노드 선택 - 애니메이션이 영향받지 않도록 유니크하게 만들기 - length를 0.7초로 변경.. 2022. 1. 7.
고도엔진 2D 슈팅게임 - 6 아머, 파괴 수정 - 스크립트에 체력(armor) 변수를 설정 - "ship"그룹에 추가 - 체력이 0 이하로 가면 삭제되는 set_armor함수 추가 수정 - 스크립트에 체력(armor) 변수를 설정 - "enemy"그룹에 추가 - 체력이 0 이하로 가면 삭제되는 set_armor함수 추가 - enemy_kamikaze.tscn의 Armor값은 2로 설정 - enemy_clever.tscn의 Armor값은 6으로 설정 - laser_ship.tscn을 불러와서 기존의 laser.gd스크립트를 제거 - 새로운 스크립트 laser_ship.gd 생성 - 속도를 -350으로 설정 - "area_enter"이벤트 발생 시 "_on_area_enter"함수와 연결 - 접촉한 외부물체가 "enemy"이면 Armor를 -1 차.. 2022. 1. 7.

티스토리툴바