2136 lines
No EOL
105 KiB
HTML
2136 lines
No EOL
105 KiB
HTML
|
|
<!doctype html>
|
|
<html lang="ko" class="no-js">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
<meta name="description" content="Description for Quad. (Korean)">
|
|
|
|
|
|
<meta name="author" content="Qwreey and more">
|
|
|
|
|
|
<link rel="canonical" href="https://quad.qwreey.kr/kr/tutorial/11_extend/">
|
|
|
|
|
|
<link rel="prev" href="../10_signal/">
|
|
|
|
|
|
<link rel="next" href="../../reference/">
|
|
|
|
<link rel="icon" href="../../assets/Quad_MiniLogo.png">
|
|
<meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.13">
|
|
|
|
|
|
|
|
<title>Extend - Quad 한국어 문서</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/stylesheets/main.ffa9267a.min.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/stylesheets/palette.a0c5b2b5.min.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/extra.css">
|
|
|
|
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body dir="ltr" data-md-color-scheme="darker" data-md-color-primary="" data-md-color-accent="">
|
|
|
|
|
|
|
|
<script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
|
|
|
|
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
|
|
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
|
|
<label class="md-overlay" for="__drawer"></label>
|
|
<div data-md-component="skip">
|
|
|
|
|
|
<a href="#extend-" class="md-skip">
|
|
콘텐츠로 이동
|
|
</a>
|
|
|
|
</div>
|
|
<div data-md-component="announce">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<header class="md-header" data-md-component="header">
|
|
<nav class="md-header__inner md-grid" aria-label="Header">
|
|
<a href="../.." title="Quad 한국어 문서" class="md-header__button md-logo" aria-label="Quad 한국어 문서" data-md-component="logo">
|
|
|
|
<img src="../../assets/Quad_MiniLogoWhite.svg" alt="logo">
|
|
|
|
</a>
|
|
<label class="md-header__button md-icon" for="__drawer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
|
|
</label>
|
|
<div class="md-header__title" data-md-component="header-title">
|
|
<div class="md-header__ellipsis">
|
|
<div class="md-header__topic">
|
|
<span class="md-ellipsis">
|
|
Quad 한국어 문서
|
|
</span>
|
|
</div>
|
|
<div class="md-header__topic" data-md-component="header-topic">
|
|
<span class="md-ellipsis">
|
|
|
|
Extend
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="md-header__option" data-md-component="palette">
|
|
|
|
|
|
<input class="md-option" data-md-color-media="" data-md-color-scheme="darker" data-md-color-primary="" data-md-color-accent="" aria-label="밝은 테마로 변경" type="radio" name="__palette" id="__palette_1">
|
|
|
|
<label class="md-header__button md-icon" title="밝은 테마로 변경" for="__palette_2" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 2c-1.05 0-2.05.16-3 .46 4.06 1.27 7 5.04 7 9.54 0 4.5-2.94 8.27-7 9.54.95.3 1.95.46 3 .46a10 10 0 0 0 10-10A10 10 0 0 0 9 2Z"/></svg>
|
|
</label>
|
|
|
|
|
|
|
|
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="" aria-label="어두운 테마로 변경" type="radio" name="__palette" id="__palette_2">
|
|
|
|
<label class="md-header__button md-icon" title="어두운 테마로 변경" for="__palette_1" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
|
|
</label>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
<div class="md-header__option">
|
|
<div class="md-select">
|
|
|
|
<button class="md-header__button md-icon" aria-label="언어설정">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7 1.62-4.33L19.12 17h-3.24Z"/></svg>
|
|
</button>
|
|
<div class="md-select__inner">
|
|
<ul class="md-select__list">
|
|
|
|
<li class="md-select__item">
|
|
<a href="/kr/" hreflang="ko" class="md-select__link">
|
|
한국어
|
|
</a>
|
|
</li>
|
|
|
|
<li class="md-select__item">
|
|
<a href="/en/" hreflang="en" class="md-select__link">
|
|
English
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<label class="md-header__button md-icon" for="__search">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
|
|
</label>
|
|
<div class="md-search" data-md-component="search" role="dialog">
|
|
<label class="md-search__overlay" for="__search"></label>
|
|
<div class="md-search__inner" role="search">
|
|
<form class="md-search__form" name="search">
|
|
<input type="text" class="md-search__input" name="query" aria-label="검색" placeholder="검색" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
|
|
<label class="md-search__icon md-icon" for="__search">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
|
|
</label>
|
|
<nav class="md-search__options" aria-label="검색">
|
|
|
|
<button type="reset" class="md-search__icon md-icon" title="지우기" aria-label="지우기" tabindex="-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
|
|
</button>
|
|
</nav>
|
|
|
|
</form>
|
|
<div class="md-search__output">
|
|
<div class="md-search__scrollwrap" data-md-scrollfix>
|
|
<div class="md-search-result" data-md-component="search-result">
|
|
<div class="md-search-result__meta">
|
|
검색 초기화
|
|
</div>
|
|
<ol class="md-search-result__list" role="presentation"></ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-header__source">
|
|
<a href="https://github.com/qwreey75/Quad" title="저장소로 이동" class="md-source" data-md-component="source">
|
|
<div class="md-source__icon md-icon">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
|
|
</div>
|
|
<div class="md-source__repository">
|
|
Quad
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
<div class="md-container" data-md-component="container">
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
|
|
<div class="md-grid">
|
|
<ul class="md-tabs__list">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href="../.." class="md-tabs__link">
|
|
홈
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href="../" class="md-tabs__link md-tabs__link--active">
|
|
튜토리얼
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-tabs__item">
|
|
<a href="../../reference/" class="md-tabs__link">
|
|
레퍼런스
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
|
|
<main class="md-main" data-md-component="main">
|
|
<div class="md-main__inner md-grid">
|
|
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
|
|
<label class="md-nav__title" for="__drawer">
|
|
<a href="../.." title="Quad 한국어 문서" class="md-nav__button md-logo" aria-label="Quad 한국어 문서" data-md-component="logo">
|
|
|
|
<img src="../../assets/Quad_MiniLogoWhite.svg" alt="logo">
|
|
|
|
</a>
|
|
Quad 한국어 문서
|
|
</label>
|
|
|
|
<div class="md-nav__source">
|
|
<a href="https://github.com/qwreey75/Quad" title="저장소로 이동" class="md-source" data-md-component="source">
|
|
<div class="md-source__icon md-icon">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
|
|
</div>
|
|
<div class="md-source__repository">
|
|
Quad
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="md-nav__link md-nav__link--index ">
|
|
<a href="../..">홈</a>
|
|
|
|
<label for="__nav_1">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_1">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
홈
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../gallery/" class="md-nav__link">
|
|
갤러리
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../changelogs/" class="md-nav__link">
|
|
변경사항
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../license/" class="md-nav__link">
|
|
라이선스
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../todo/" class="md-nav__link">
|
|
로드맵
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="md-nav__link md-nav__link--index ">
|
|
<a href="../">튜토리얼</a>
|
|
|
|
<label for="__nav_2">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
|
|
<label class="md-nav__title" for="__nav_2">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
튜토리얼
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../1_import/" class="md-nav__link">
|
|
Import
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../2_mount/" class="md-nav__link">
|
|
Mount
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../3_getObject/" class="md-nav__link">
|
|
GetObject
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../4_style/" class="md-nav__link">
|
|
Style
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../5_event/" class="md-nav__link">
|
|
Event
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../6_tween/" class="md-nav__link">
|
|
Tween
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../7_quadProperty/" class="md-nav__link">
|
|
QuadProperty
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../8_register/" class="md-nav__link">
|
|
Register
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../9_lang/" class="md-nav__link">
|
|
Lang
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../10_signal/" class="md-nav__link">
|
|
Signal
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active">
|
|
|
|
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
|
Extend
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<a href="./" class="md-nav__link md-nav__link--active">
|
|
Extend
|
|
</a>
|
|
|
|
|
|
|
|
<nav class="md-nav md-nav--secondary" aria-label="목차">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="__toc">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
목차
|
|
</label>
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#extend" class="md-nav__link">
|
|
Extend 란?
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#_1" class="md-nav__link">
|
|
나만의 클래스를 만들어보기
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#extend_1" class="md-nav__link">
|
|
Extend
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="md-nav__link md-nav__link--index ">
|
|
<a href="../../reference/">레퍼런스</a>
|
|
|
|
<label for="__nav_3">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_3">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
레퍼런스
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2" >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="md-nav__link md-nav__link--index ">
|
|
<a href="../../reference/signal/">Signal</a>
|
|
|
|
<label for="__nav_3_2">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_2_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_3_2">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Signal
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/signal/bindable/" class="md-nav__link">
|
|
Bindable
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/signal/disconnecter/" class="md-nav__link">
|
|
Disconnecter
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_3" >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="md-nav__link md-nav__link--index ">
|
|
<a href="../../reference/store/">Store</a>
|
|
|
|
<label for="__nav_3_3">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_3_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_3_3">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Store
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/store/objectList/" class="md-nav__link">
|
|
ObjectList
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_4" >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="md-nav__link md-nav__link--index ">
|
|
<a href="../../reference/tween/">Tween</a>
|
|
|
|
<label for="__nav_3_4">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_4_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_3_4">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Tween
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/tween/tweenOptions/" class="md-nav__link">
|
|
TweenOptions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/tween/easings/" class="md-nav__link">
|
|
Easings
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/tween/directions/" class="md-nav__link">
|
|
Directions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/event/" class="md-nav__link">
|
|
Event
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/extend/" class="md-nav__link">
|
|
Extend
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/lang/" class="md-nav__link">
|
|
Lang
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/mounts/" class="md-nav__link">
|
|
Mounts
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/quadProperty/" class="md-nav__link">
|
|
QuadProperty
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="md-content" data-md-component="content">
|
|
<article class="md-content__inner md-typeset">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h1 id="extend-">Extend - 확장과 재사용<a class="headerlink" href="#extend-" title="Permanent link">¶</a></h1>
|
|
<h2 id="extend">Extend 란?<a class="headerlink" href="#extend" title="Permanent link">¶</a></h2>
|
|
<p>Quad 에서는 로블록스의 <code>Frame</code> 이나 <code>TextButton</code> 같은 기본 오브젝트만 만들 수 있는것이 아닙니다. Quad 는 자신만의 버튼, 혹은 여러 컴포넌트들을 추상적으로 만들고. 다시 활용할 수 있도록 <code>Extend</code> 를 지원합니다.</p>
|
|
<p><code>Extend</code> 는 <code>Register</code> 와 더불어 Quad 의 가장 중요한 기능으로써, 다음과 같은 장점을 지닙니다.</p>
|
|
<blockquote>
|
|
<ol>
|
|
<li>재사용 가능합니다. 나만의 버튼을 만들고, 고치고 싶은 마음이 생겨 고치면 자동으로 사용된 곳들이 업데이트됩니다. </li>
|
|
<li>긴 코드를 나누어 코드마다 확실한 목적을 부여해 더 명확한 코드 작성이 가능해집니다. </li>
|
|
<li>자신만의 프로퍼티를 만들거나 완전히 원하는대로 오브젝트를 커스터마이징 할 수 있습니다. </li>
|
|
<li>함수나 생성기를 직접 만드는 것 보다 일관된 방법을 제공합니다. </li>
|
|
<li>매우 유연합니다. 다양한 방법의 구현법을 원하는대로 사용할 수 있습니다. </li>
|
|
</ol>
|
|
</blockquote>
|
|
<hr />
|
|
<h2 id="_1">나만의 클래스를 만들어보기<a class="headerlink" href="#_1" title="Permanent link">¶</a></h2>
|
|
<p><code>Extend</code> 객체는 다음과 같이 생성합니다.<br />
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
|
|
<span class="normal">2</span>
|
|
<span class="normal">3</span>
|
|
<span class="normal">4</span>
|
|
<span class="normal">5</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
|
|
<span class="c1">-- extend 객체를 만듭니다</span>
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
</code></pre></div></td></tr></table></div>
|
|
일반적으로 Extend 는 한 모듈에 하나씩 넣습니다. </p>
|
|
<p>다음과 같은 코드 구조를 만들어보세요. 아래의 코드는 모든 <code>Extend</code> 문법을 설명합니다.<br />
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
|
|
<span class="normal">2</span>
|
|
<span class="normal">3</span></pre></div></td><td class="code"><div><pre><span></span><code> - ScreenGUI
|
|
|-- localscript
|
|
|-- myClass (ModuleScript)
|
|
</code></pre></div></td></tr></table></div></p>
|
|
<div class="tabbed-set tabbed-alternate" data-tabs="1:2"><input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" /><input id="__tabbed_1_2" name="__tabbed_1" type="radio" /><div class="tabbed-labels"><label for="__tabbed_1_1">localscript</label><label for="__tabbed_1_2">localscript.myClass</label></div>
|
|
<div class="tabbed-content">
|
|
<div class="tabbed-block">
|
|
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">Extend 클래스를 불러오고 사용합니다</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span>
|
|
<span class="normal">24</span>
|
|
<span class="normal">25</span>
|
|
<span class="normal">26</span>
|
|
<span class="normal">27</span>
|
|
<span class="normal">28</span>
|
|
<span class="normal">29</span>
|
|
<span class="normal">30</span>
|
|
<span class="normal">31</span>
|
|
<span class="normal">32</span>
|
|
<span class="normal">33</span>
|
|
<span class="normal">34</span>
|
|
<span class="normal">35</span>
|
|
<span class="normal">36</span>
|
|
<span class="normal">37</span>
|
|
<span class="normal">38</span>
|
|
<span class="normal">39</span>
|
|
<span class="normal">40</span>
|
|
<span class="normal">41</span>
|
|
<span class="normal">42</span>
|
|
<span class="normal">43</span>
|
|
<span class="normal">44</span>
|
|
<span class="normal">45</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">ScreenGUI</span> <span class="o">=</span> <span class="n">script</span><span class="p">.</span><span class="n">Parent</span>
|
|
<span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Mount</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Mount</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
<span class="kd">local</span> <span class="n">Store</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Store</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myStore</span> <span class="o">=</span> <span class="n">Store</span><span class="p">.</span><span class="n">GetStore</span><span class="p">(</span><span class="s2">"myStore"</span><span class="p">)</span>
|
|
<span class="n">myStore</span><span class="p">.</span><span class="n">bgColor</span> <span class="o">=</span> <span class="n">Color3</span><span class="p">.</span><span class="n">fromRGB</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">)</span>
|
|
|
|
<span class="c1">-- Class(require(script.myClass)) 와 같습니다.</span>
|
|
<span class="c1">-- 줄여서 Class(script.myClass) 로 쓸 수도 있습니다.</span>
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">script</span><span class="p">.</span><span class="n">myClass</span><span class="p">)</span>
|
|
|
|
<span class="c1">-- 프레임에 넣거나 하여도 무방합니다</span>
|
|
<span class="c1">-- 일반 오브젝트와 똑같이 id 를 넣고 GetObject 로</span>
|
|
<span class="c1">-- 가져올 수도 있습니다</span>
|
|
<span class="kd">local</span> <span class="n">main</span> <span class="o">=</span> <span class="n">myClass</span> <span class="s2">"main"</span> <span class="p">{</span>
|
|
<span class="c1">-- 이 테이블은 모듈의 :Init(props) 에 제공됩니다.</span>
|
|
<span class="c1">-- :Render(props) 에도 이 테이블이 제공됩니다.</span>
|
|
<span class="n">Testing</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
|
|
<span class="n">Text</span> <span class="o">=</span> <span class="s2">"Test"</span><span class="p">;</span>
|
|
<span class="c1">-- 레지스터 값을 넘겨줄 수도 있습니다.</span>
|
|
<span class="c1">-- 받는쪽도 레지스터인 경우 값이 연동됩니다.</span>
|
|
<span class="n">BackgroundColor3</span> <span class="o">=</span> <span class="n">myStore</span> <span class="s2">"bgColor"</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="n">Mount</span><span class="p">(</span><span class="n">ScreenGUI</span><span class="p">,</span> <span class="n">main</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">Store</span><span class="p">.</span><span class="n">GetObject</span><span class="p">(</span><span class="s2">"main"</span><span class="p">)</span> <span class="o">==</span> <span class="n">main</span><span class="p">)</span> <span class="c1">-- true</span>
|
|
|
|
<span class="c1">-- 이 값을 바꾸면 연동된 BackgroundColor3 도 바뀔것입니다</span>
|
|
<span class="n">myStore</span><span class="p">.</span><span class="n">bgColor</span> <span class="o">=</span> <span class="n">Color3</span><span class="p">.</span><span class="n">fromRGB</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">)</span>
|
|
|
|
<span class="c1">-- 값 변경됨을 연결하기</span>
|
|
<span class="n">main</span>
|
|
<span class="p">:</span><span class="n">GetPropertyChangedSignal</span><span class="p">(</span><span class="s2">"AbsolutePosition"</span><span class="p">)</span>
|
|
<span class="p">:</span><span class="n">Connect</span><span class="p">(</span><span class="kr">function</span><span class="p">()</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="s2">"AbsolutePosition"</span><span class="p">,</span><span class="n">main</span><span class="p">.</span><span class="n">AbsolutePosition</span><span class="p">)</span>
|
|
<span class="kr">end</span><span class="p">)</span>
|
|
|
|
<span class="c1">-- main:Update()</span>
|
|
<span class="c1">-- 강제로 다시 Render 를 실행하도록 만듭니다.</span>
|
|
|
|
<span class="c1">-- main.Testing = 2</span>
|
|
<span class="c1">-- 업데이트 트리거이므로 이 값을 변경하면.</span>
|
|
<span class="c1">-- main:Update() 와 같은 효과가 납니다.</span>
|
|
</code></pre></div></td></tr></table></div>
|
|
</div>
|
|
<div class="tabbed-block">
|
|
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">Extend 클래스를 만듭니다. 다른곳에서 불러서 사용할 수 있습니다.</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal"> 10</span>
|
|
<span class="normal"> 11</span>
|
|
<span class="normal"> 12</span>
|
|
<span class="normal"> 13</span>
|
|
<span class="normal"> 14</span>
|
|
<span class="normal"> 15</span>
|
|
<span class="normal"> 16</span>
|
|
<span class="normal"> 17</span>
|
|
<span class="normal"> 18</span>
|
|
<span class="normal"> 19</span>
|
|
<span class="normal"> 20</span>
|
|
<span class="normal"> 21</span>
|
|
<span class="normal"> 22</span>
|
|
<span class="normal"> 23</span>
|
|
<span class="normal"> 24</span>
|
|
<span class="normal"> 25</span>
|
|
<span class="normal"> 26</span>
|
|
<span class="normal"> 27</span>
|
|
<span class="normal"> 28</span>
|
|
<span class="normal"> 29</span>
|
|
<span class="normal"> 30</span>
|
|
<span class="normal"> 31</span>
|
|
<span class="normal"> 32</span>
|
|
<span class="normal"> 33</span>
|
|
<span class="normal"> 34</span>
|
|
<span class="normal"> 35</span>
|
|
<span class="normal"> 36</span>
|
|
<span class="normal"> 37</span>
|
|
<span class="normal"> 38</span>
|
|
<span class="normal"> 39</span>
|
|
<span class="normal"> 40</span>
|
|
<span class="normal"> 41</span>
|
|
<span class="normal"> 42</span>
|
|
<span class="normal"> 43</span>
|
|
<span class="normal"> 44</span>
|
|
<span class="normal"> 45</span>
|
|
<span class="normal"> 46</span>
|
|
<span class="normal"> 47</span>
|
|
<span class="normal"> 48</span>
|
|
<span class="normal"> 49</span>
|
|
<span class="normal"> 50</span>
|
|
<span class="normal"> 51</span>
|
|
<span class="normal"> 52</span>
|
|
<span class="normal"> 53</span>
|
|
<span class="normal"> 54</span>
|
|
<span class="normal"> 55</span>
|
|
<span class="normal"> 56</span>
|
|
<span class="normal"> 57</span>
|
|
<span class="normal"> 58</span>
|
|
<span class="normal"> 59</span>
|
|
<span class="normal"> 60</span>
|
|
<span class="normal"> 61</span>
|
|
<span class="normal"> 62</span>
|
|
<span class="normal"> 63</span>
|
|
<span class="normal"> 64</span>
|
|
<span class="normal"> 65</span>
|
|
<span class="normal"> 66</span>
|
|
<span class="normal"> 67</span>
|
|
<span class="normal"> 68</span>
|
|
<span class="normal"> 69</span>
|
|
<span class="normal"> 70</span>
|
|
<span class="normal"> 71</span>
|
|
<span class="normal"> 72</span>
|
|
<span class="normal"> 73</span>
|
|
<span class="normal"> 74</span>
|
|
<span class="normal"> 75</span>
|
|
<span class="normal"> 76</span>
|
|
<span class="normal"> 77</span>
|
|
<span class="normal"> 78</span>
|
|
<span class="normal"> 79</span>
|
|
<span class="normal"> 80</span>
|
|
<span class="normal"> 81</span>
|
|
<span class="normal"> 82</span>
|
|
<span class="normal"> 83</span>
|
|
<span class="normal"> 84</span>
|
|
<span class="normal"> 85</span>
|
|
<span class="normal"> 86</span>
|
|
<span class="normal"> 87</span>
|
|
<span class="normal"> 88</span>
|
|
<span class="normal"> 89</span>
|
|
<span class="normal"> 90</span>
|
|
<span class="normal"> 91</span>
|
|
<span class="normal"> 92</span>
|
|
<span class="normal"> 93</span>
|
|
<span class="normal"> 94</span>
|
|
<span class="normal"> 95</span>
|
|
<span class="normal"> 96</span>
|
|
<span class="normal"> 97</span>
|
|
<span class="normal"> 98</span>
|
|
<span class="normal"> 99</span>
|
|
<span class="normal">100</span>
|
|
<span class="normal">101</span>
|
|
<span class="normal">102</span>
|
|
<span class="normal">103</span>
|
|
<span class="normal">104</span>
|
|
<span class="normal">105</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
<span class="kd">local</span> <span class="n">Event</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Event</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextLabel</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextLabel"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
|
|
<span class="c1">-- Init 는 Render 전 props 를 초기화 하는 용도로 사용합니다</span>
|
|
<span class="c1">-- Init 에는 프로퍼티 리스트가 제공됩니다. Init 는 없더라도 무방합니다.</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Init</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="c1">-- 생성된 오브젝트에 프라이빗 값을 만듭니다.</span>
|
|
<span class="c1">-- 이름 앞에 _ 가 붇으면 외부에서 사용되는 목적이 아닌</span>
|
|
<span class="c1">-- 내부에서 사용되는 목적으로만 사용할 수 있습니다</span>
|
|
<span class="c1">-- 이 경우 안전성을 위해 register 를 사용할 수</span>
|
|
<span class="c1">-- 없습니다.</span>
|
|
<span class="n">self</span><span class="p">.</span><span class="n">_testValue</span> <span class="o">=</span> <span class="mi">2</span>
|
|
|
|
<span class="c1">-- 프로퍼티의 기본값을 정해줄 수 있습니다.</span>
|
|
<span class="c1">-- 생성 시 값이 누락된 경우 사용할 값을 정해줄 수 있습니다</span>
|
|
<span class="c1">-- 키, 값 으로 구성합니다</span>
|
|
<span class="n">props</span><span class="p">:</span><span class="n">Default</span><span class="p">(</span><span class="s2">"Text"</span><span class="p">,</span> <span class="s2">"Testing Label"</span><span class="p">)</span>
|
|
<span class="n">props</span><span class="p">:</span><span class="n">Default</span><span class="p">(</span><span class="s2">"ZIndex"</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="c1">-- myClass 가 진짜 그려지는 부분입니다.</span>
|
|
<span class="c1">-- Render 도 Init 처럼 프로퍼티 리스트가 제공됩니다.</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextLabel</span> <span class="p">{</span>
|
|
<span class="n">Size</span> <span class="o">=</span> <span class="n">UDim2</span><span class="p">.</span><span class="n">fromOffset</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span><span class="mi">200</span><span class="p">);</span>
|
|
<span class="c1">-- self 에 _label 로 이 TextLabel 을 넣습니다.</span>
|
|
<span class="c1">-- 자식 오브젝트에도 사용할 수 있는 문법입니다.</span>
|
|
<span class="n">self</span> <span class="s2">"_label"</span><span class="p">;</span>
|
|
|
|
<span class="c1">-- _holder 는 예약된 값입니다. 자식들이 여기에 들어와야</span>
|
|
<span class="c1">-- 함을 나타냅니다. 리스트나 그리드가 있는 경우 유용합니다.</span>
|
|
<span class="c1">-- 따로 설정하지 않는 경우 Render 가 리턴한 값을 사용합니다.</span>
|
|
<span class="n">self</span> <span class="s2">"_holder"</span><span class="p">;</span>
|
|
|
|
<span class="c1">-- GetPropertyChangedSignal 가 작동할 수 있도록</span>
|
|
<span class="c1">-- 프로퍼티 변경 이벤트를 연결해줍니다</span>
|
|
<span class="c1">-- 이 또한 자식 오브젝트에도 사용할 수 있는 문법입니다.</span>
|
|
<span class="p">[</span><span class="n">Event</span><span class="p">.</span><span class="n">Prop</span> <span class="s2">"AbsolutePosition"</span><span class="p">]</span> <span class="o">=</span> <span class="n">self</span> <span class="s2">"AbsolutePosition"</span><span class="p">;</span>
|
|
<span class="c1">-- 마우스 클릭같은 다른 이벤트를 GetPropertyChangedSignal 에</span>
|
|
<span class="c1">-- 연결하려면 :EmitPropertyChangedSignal() 를 호출해주면 됩니다.</span>
|
|
<span class="p">[</span><span class="n">Event</span> <span class="s2">"MouseEnter"</span><span class="p">]</span> <span class="o">=</span> <span class="kr">function</span> <span class="p">(</span><span class="n">this</span><span class="p">,</span><span class="n">x</span><span class="p">,</span><span class="n">y</span><span class="p">)</span>
|
|
<span class="c1">-- 키, 값이 들어갑니다. 값이 없으면 self[key] 로 대신합니다.</span>
|
|
<span class="n">self</span><span class="p">:</span><span class="n">EmitPropertyChangedSignal</span><span class="p">(</span><span class="s2">"Testing2"</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span>
|
|
<span class="kr">end</span><span class="p">;</span>
|
|
|
|
<span class="c1">-- 받은 레지스터를 연동합니다.</span>
|
|
<span class="c1">-- 만약 props.BackgroundColor3 만 사용하면</span>
|
|
<span class="c1">-- 처음에만 레지스터에서 값을 읽어옵니다.</span>
|
|
<span class="c1">-- 따라서 값을 변경해도 변경사항이 적용되지 않습니다.</span>
|
|
<span class="n">BackgroundColor3</span> <span class="o">=</span> <span class="n">props</span> <span class="s2">"BackgroundColor3"</span><span class="p">:</span><span class="n">Tween</span><span class="p">();</span>
|
|
|
|
<span class="c1">-- 입력 값과 상관없이 레지스터를 쓸 수 있습니다.</span>
|
|
<span class="c1">-- 이 경우 main.Text = "New" 처럼 직접 변경하면</span>
|
|
<span class="c1">-- 그 변경이 적용됩니다.</span>
|
|
<span class="n">Text</span> <span class="o">=</span> <span class="n">props</span> <span class="s2">"Text"</span><span class="p">;</span>
|
|
<span class="n">ZIndex</span> <span class="o">=</span> <span class="n">props</span> <span class="s2">"ZIndex"</span><span class="p">;</span>
|
|
<span class="c1">-- ... 자식을 넣어도 무방합니다.</span>
|
|
<span class="c1">-- Frame {</span>
|
|
<span class="c1">-- [Event.Created] = function(self)</span>
|
|
<span class="c1">-- print(self.Parent) -- nil 일 수도 있습니다</span>
|
|
<span class="c1">-- 따라서 부모를 건들여야 하는 경우, self "" 를 통해</span>
|
|
<span class="c1">-- self 값에 넣어놓고 나중에 AfterRender 로 해결해야합니다.</span>
|
|
<span class="c1">-- end;</span>
|
|
<span class="c1">-- }</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
|
|
|
|
<span class="c1">-- AfterRender 는 Render 직후 실행됩니다.</span>
|
|
<span class="c1">-- 렌더링 후 실행해야 할 것을 넣을 수 있습니다.</span>
|
|
<span class="c1">-- object 는 :Render 가 반환한 값입니다.</span>
|
|
<span class="c1">-- AfterRender 는 없더라도 무방합니다.</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">AfterRender</span><span class="p">(</span><span class="n">object</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">self</span><span class="p">.</span><span class="n">_label</span><span class="p">,</span><span class="s2">"이 생성되었습니다"</span><span class="p">)</span>
|
|
<span class="c1">-- 이렇게 하면 레지스터로 연결된 부분도 업데이트됩니다.</span>
|
|
<span class="n">self</span><span class="p">.</span><span class="n">ZIndex</span> <span class="o">=</span> <span class="mi">2</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="c1">-- function myClass:Unload(object)</span>
|
|
<span class="c1">-- :Destroy 가 호출될 때 사용됩니다. 따로 선언하지 않아도</span>
|
|
<span class="c1">-- 연결을 모두 끊고 없에주지만 필요한 경우 직접 없에줄 수 있습니다</span>
|
|
<span class="c1">-- object 는 :Render 가 반환한 값입니다</span>
|
|
|
|
<span class="c1">-- AbsolutePosition 값을 반환할 수 있도록 만듭니다</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">.</span><span class="nc">Getter</span><span class="p">.</span><span class="nf">AbsolutePosition</span><span class="p">(</span><span class="n">self</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">self</span><span class="p">.</span><span class="n">_label</span><span class="p">.</span><span class="n">AbsolutePosition</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="c1">-- AbsolutePosition 값을 설정할 수 없도록 만듭니다</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">.</span><span class="nc">Setter</span><span class="p">.</span><span class="nf">AbsolutePosition</span><span class="p">(</span><span class="n">self</span><span class="p">,</span><span class="n">newValue</span><span class="p">)</span>
|
|
<span class="c1">-- 필요한 경우 값을 설정하도록 만들 수 있습니다</span>
|
|
<span class="nb">error</span><span class="p">(</span><span class="s2">"AbsolutePosition 값은 설정할 수 없습니다"</span><span class="p">)</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="c1">-- main.Testing = 2 다음과 같이 값을 변경하면 오브젝트가</span>
|
|
<span class="c1">-- 완전히 다시 그려집니다. 즉 업데이트 트리거로 사용합니다.</span>
|
|
<span class="n">myClass</span><span class="p">.</span><span class="n">UpdateTriggers</span><span class="p">.</span><span class="n">Testing</span> <span class="o">=</span> <span class="kc">true</span>
|
|
|
|
<span class="c1">-- 만든 클래스를 반환해줍시다.</span>
|
|
<span class="kr">return</span> <span class="n">myClass</span>
|
|
</code></pre></div></td></tr></table></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<h2 id="extend_1">Extend<a class="headerlink" href="#extend_1" title="Permanent link">¶</a></h2>
|
|
<p>Extend 에서 사용할 수 있는 값들과 메소드입니다. </p>
|
|
<p><code>self(name:string)->linker</code> </p>
|
|
<blockquote>
|
|
<p>Extend 메소드 전역에서 사용가능합니다. 링커를 만들며, <code>PropertyChangedSignal</code> 를 이어주거나, self 에 원하는 오브젝트를 넣는 용도로 사용됩니다. 자세한 정보는 Render 를 확인해주세요. </p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Overwite</mark> <mark><strong>REQUIRED</strong></mark> <code class="highlight"><span class="o">:</span><span class="nx">Render</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="kt">valueStore</span><span class="p">)</span></code> </p>
|
|
<blockquote>
|
|
<p>화면에 그려지는 UI 를 만들어지게 하는 함수입니다. <code>Extend</code> 가 그려지려면 무조건 있어야합니다.<br />
|
|
이 오브젝트를 만드는데 들어간 프로퍼티 목록을 첫번째 인자로 줍니다. 레지스터 문법이 사용될 수 있습니다. </p>
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span>
|
|
<span class="normal">24</span>
|
|
<span class="normal">25</span>
|
|
<span class="normal">26</span>
|
|
<span class="normal">27</span>
|
|
<span class="normal">28</span>
|
|
<span class="normal">29</span>
|
|
<span class="normal">30</span>
|
|
<span class="normal">31</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">ScreenGUI</span> <span class="o">=</span> <span class="n">script</span><span class="p">.</span><span class="n">Parent</span>
|
|
<span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
<span class="kd">local</span> <span class="n">Event</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Event</span>
|
|
<span class="kd">local</span> <span class="n">Mount</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Mount</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="p">[</span><span class="n">Event</span> <span class="s2">"MouseButton1Click"</span><span class="p">]</span> <span class="o">=</span> <span class="kr">function</span> <span class="p">(</span><span class="n">self</span><span class="p">,</span><span class="n">x</span><span class="p">,</span><span class="n">y</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">((</span><span class="s2">"버튼이 %d,%d 에서 눌렸습니다"</span><span class="p">):</span><span class="n">format</span><span class="p">(</span><span class="n">x</span><span class="p">,</span><span class="n">y</span><span class="p">))</span>
|
|
<span class="kr">end</span><span class="p">;</span>
|
|
<span class="n">Size</span> <span class="o">=</span> <span class="n">props</span> <span class="s2">"Size"</span><span class="p">;</span>
|
|
<span class="n">Text</span> <span class="o">=</span> <span class="n">props</span> <span class="s2">"Text"</span><span class="p">;</span> <span class="c1">-- 레지스터를 이용합니다</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="n">myImported</span><span class="p">.</span><span class="n">Size</span> <span class="o">=</span> <span class="n">UDim2</span><span class="p">.</span><span class="n">fromOffset</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span><span class="mi">200</span><span class="p">)</span>
|
|
|
|
<span class="kd">local</span> <span class="n">test</span> <span class="o">=</span> <span class="n">myImported</span> <span class="p">{</span>
|
|
<span class="n">Text</span> <span class="o">=</span> <span class="s2">"wow"</span>
|
|
<span class="p">}</span>
|
|
<span class="n">Mount</span><span class="p">(</span><span class="n">ScreenGUI</span><span class="p">,</span> <span class="n">test</span><span class="p">)</span>
|
|
|
|
<span class="c1">-- 텍스트를 업데이트합니다</span>
|
|
<span class="kr">while</span> <span class="n">task</span><span class="p">.</span><span class="n">wait</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="kr">do</span>
|
|
<span class="n">test</span><span class="p">.</span><span class="n">Text</span> <span class="o">=</span> <span class="s2">"w"</span><span class="o">..</span><span class="p">(</span><span class="s2">"o"</span><span class="p">):</span><span class="n">rep</span><span class="p">(</span><span class="o">#</span><span class="n">test</span><span class="p">.</span><span class="n">Text</span><span class="o">-</span><span class="mi">1</span><span class="p">)</span><span class="o">..</span><span class="s2">"w"</span>
|
|
<span class="kr">end</span>
|
|
</code></pre></div></td></tr></table></div>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Overwite</mark> <mark>Option</mark> <code class="highlight"><span class="o">:</span><span class="nx">Init</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="kt">valueStore</span><span class="p">)</span></code> </p>
|
|
<blockquote>
|
|
<p>선택적인 메소드로, Render 가 수행 되기 전에 미리 props 값을 설정할 수 있습니다.</p>
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Init</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="c1">-- Size 값이 없다면 기본값을 사용하도록 합니다.</span>
|
|
<span class="n">props</span><span class="p">:</span><span class="n">Default</span><span class="p">(</span><span class="s2">"Size"</span><span class="p">,</span> <span class="n">UDim2</span><span class="p">.</span><span class="n">fromOffset</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span><span class="mi">100</span><span class="p">))</span>
|
|
|
|
<span class="c1">-- 앞에 _ 를 붇여 내부 변수를 만듭니다.</span>
|
|
<span class="c1">-- 어디에서나 쓰일 수 있으며 register 에 영향주지 않습니다.</span>
|
|
<span class="n">self</span><span class="p">.</span><span class="n">_asdf</span> <span class="o">=</span> <span class="kc">true</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="n">props</span> <span class="s2">"Size"</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="kd">local</span> <span class="n">myButton</span> <span class="o">=</span> <span class="n">myImported</span><span class="p">()</span> <span class="c1">-- 옵션 없음</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">myButton</span><span class="p">.</span><span class="n">Size</span><span class="p">)</span>
|
|
</code></pre></div></td></tr></table></div>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Overwite</mark> <mark>Option</mark> <code class="highlight"><span class="o">:</span><span class="nx">AfterRender</span><span class="p">(</span><span class="nx">object</span><span class="o">:</span><span class="kt">any</span><span class="p">)</span></code> </p>
|
|
<blockquote>
|
|
<p>선택적인 메소드로, Render 가 수행 된 후 할 작업을 만들 수 있습니다. 첫번째 인자로 Render 가 반환한 값이 주어집니다. </p>
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="n">self</span> <span class="s2">"_button"</span><span class="p">;</span> <span class="c1">-- 자기 자신에 이 버튼을 넣습니다</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">AfterRender</span><span class="p">(</span><span class="n">object</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">self</span><span class="p">.</span><span class="n">_button</span> <span class="o">==</span> <span class="n">object</span><span class="p">)</span> <span class="c1">-- true</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="n">myImported</span><span class="p">()</span> <span class="c1">-- 옵션 없음</span>
|
|
</code></pre></div></td></tr></table></div>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Overwite</mark> <mark>Option</mark> <code class="highlight"><span class="o">:</span><span class="nx">Update</span><span class="p">()</span></code> </p>
|
|
<blockquote>
|
|
<p><code>:Render</code> 와 <code>:AfterRender</code> 를 다시 실행하고, 이전에 있던 자식들을 다시 끌어옵니다.<br />
|
|
이전의 Render 결과는 제거됩니다
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span>
|
|
<span class="normal">24</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
<span class="kd">local</span> <span class="n">count</span> <span class="o">=</span> <span class="mi">0</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="s2">"Rendering!"</span><span class="p">)</span>
|
|
<span class="n">count</span> <span class="o">=</span> <span class="n">count</span> <span class="o">+</span> <span class="mi">1</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="n">self</span> <span class="s2">"_button"</span><span class="p">;</span>
|
|
<span class="n">Name</span> <span class="o">=</span> <span class="nb">tostring</span><span class="p">(</span><span class="n">count</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">AfterRender</span><span class="p">(</span><span class="n">object</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">self</span><span class="p">.</span><span class="n">_button</span><span class="p">.</span><span class="n">Name</span><span class="p">)</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="kd">local</span> <span class="n">myButton</span> <span class="o">=</span> <span class="n">myImported</span><span class="p">()</span>
|
|
<span class="n">myButton</span><span class="p">:</span><span class="n">Update</span><span class="p">()</span> <span class="c1">-- update</span>
|
|
<span class="n">myButton</span><span class="p">:</span><span class="n">Update</span><span class="p">()</span> <span class="c1">-- update</span>
|
|
<span class="n">myButton</span><span class="p">:</span><span class="n">Update</span><span class="p">()</span> <span class="c1">-- update</span>
|
|
</code></pre></div></td></tr></table></div></p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Overwite</mark> <mark>Option</mark> <code class="highlight"><span class="p">.</span><span class="nx">Getter</span><span class="p">.</span><span class="o"><</span><span class="nx">PropertyName</span><span class="o">></span><span class="p">(</span><span class="nx">self</span><span class="p">)</span></code> </p>
|
|
<blockquote>
|
|
<p>값을 얻는데 사용됩니다.
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{}</span>
|
|
<span class="kr">end</span>
|
|
<span class="c1">-- 값을 읽는데 사용할 함수를 등록합니다</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">.</span><span class="nc">Getter</span><span class="p">.</span><span class="nf">Test</span><span class="p">(</span><span class="n">self</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="s2">"Hello World"</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">myImported</span><span class="p">().</span><span class="n">Test</span><span class="p">)</span>
|
|
</code></pre></div></td></tr></table></div></p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Overwite</mark> <mark>Option</mark> <code class="highlight"><span class="p">.</span><span class="nx">Setter</span><span class="p">.</span><span class="o"><</span><span class="nx">PropertyName</span><span class="o">></span><span class="p">(</span><span class="nx">self</span><span class="p">,</span><span class="nx">newValue</span><span class="o">:</span><span class="kt">any</span><span class="p">)</span></code> </p>
|
|
<blockquote>
|
|
<p>값을 설정하는데 사용됩니다.
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span>
|
|
<span class="normal">24</span>
|
|
<span class="normal">25</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="n">self</span> <span class="s2">"_button"</span><span class="p">;</span>
|
|
<span class="n">Text</span> <span class="o">=</span> <span class="s2">"wow"</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
<span class="c1">-- 값을 지정하는데 사용할 함수를 등록합니다</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">.</span><span class="nc">Setter</span><span class="p">.</span><span class="nf">Test</span><span class="p">(</span><span class="n">self</span><span class="p">,</span><span class="n">newValue</span><span class="p">)</span>
|
|
<span class="n">self</span><span class="p">.</span><span class="n">_button</span><span class="p">.</span><span class="n">Text</span> <span class="o">=</span> <span class="n">newValue</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">.</span><span class="nc">Getter</span><span class="p">.</span><span class="nf">Test</span><span class="p">(</span><span class="n">self</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">self</span><span class="p">.</span><span class="n">_button</span><span class="p">.</span><span class="n">Text</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="kd">local</span> <span class="n">myButton</span> <span class="o">=</span> <span class="n">myImported</span><span class="p">()</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">myButton</span><span class="p">.</span><span class="n">Test</span><span class="p">)</span>
|
|
<span class="n">myButton</span><span class="p">.</span><span class="n">Test</span> <span class="o">=</span> <span class="s2">"Hello World"</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">myButton</span><span class="p">.</span><span class="n">Test</span><span class="p">)</span>
|
|
</code></pre></div></td></tr></table></div></p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Overwite</mark> <mark>Option</mark> <code class="highlight"><span class="p">.</span><span class="nx">UpdateTriggers</span><span class="p">.</span><span class="o"><</span><span class="nx">PropertyName</span><span class="o">></span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">boolean</span><span class="o">?</span></code> </p>
|
|
<blockquote>
|
|
<p>해당 값을 변경하면 Update 가 수행될지 여부를 지정합니다.
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span>
|
|
<span class="normal">24</span>
|
|
<span class="normal">25</span>
|
|
<span class="normal">26</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
<span class="kd">local</span> <span class="n">count</span> <span class="o">=</span> <span class="mi">0</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="s2">"Rendering!"</span><span class="p">)</span>
|
|
<span class="n">count</span> <span class="o">=</span> <span class="n">count</span> <span class="o">+</span> <span class="mi">1</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="n">self</span> <span class="s2">"_button"</span><span class="p">;</span>
|
|
<span class="n">Name</span> <span class="o">=</span> <span class="nb">tostring</span><span class="p">(</span><span class="n">count</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">AfterRender</span><span class="p">(</span><span class="n">object</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">self</span><span class="p">.</span><span class="n">_button</span><span class="p">.</span><span class="n">Name</span><span class="p">)</span>
|
|
<span class="kr">end</span>
|
|
<span class="c1">-- 값 변경시 업데이트 여부를 지정합니다</span>
|
|
<span class="n">myClass</span><span class="p">.</span><span class="n">UpdateTriggers</span><span class="p">.</span><span class="n">Test</span> <span class="o">=</span> <span class="kc">true</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="kd">local</span> <span class="n">myButton</span> <span class="o">=</span> <span class="n">myImported</span><span class="p">()</span>
|
|
<span class="n">myButton</span><span class="p">.</span><span class="n">Test</span> <span class="o">=</span> <span class="mi">1</span> <span class="c1">-- update</span>
|
|
<span class="n">myButton</span><span class="p">.</span><span class="n">Test</span> <span class="o">=</span> <span class="mi">1</span> <span class="c1">-- update</span>
|
|
<span class="n">myButton</span><span class="p">.</span><span class="n">Test</span> <span class="o">=</span> <span class="mi">1</span> <span class="c1">-- update</span>
|
|
</code></pre></div></td></tr></table></div></p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Overwite</mark> <mark>Option</mark> <code class="highlight"><span class="o">:</span><span class="nx">Unload</span><span class="p">(</span><span class="nx">object</span><span class="p">)</span></code> </p>
|
|
<blockquote>
|
|
<p>:Destroy 가 호출될 때 사용됩니다. 따로 선언하지 않아도 연결을 모두 끊고 없에주지만 필요한 경우 직접 없에줄 수 있습니다. object 는 :Render 가 반환한 값입니다</p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><code class="highlight"><span class="o">:</span><span class="nx">GetPropertyChangedSignal</span><span class="p">(</span><span class="nx">propertyName</span><span class="o">:</span><span class="kt">string</span><span class="p">)</span><span class="o">-></span><span class="nx">Bindable</span></code> </p>
|
|
<blockquote>
|
|
<p>값 변경을 연결할 수 있는 <code>Bindable</code>을 반환합니다. <code>:EmitPropertyChangedSignal</code> 으로 이 시그널을 작동시킬 수 있습니다. 편의상 이 시그널이 작동할 때, 새로운 값이 첫번째 인자로 주어집니다.</p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><code class="highlight"><span class="o">:</span><span class="nx">EmitPropertyChangedSignal</span><span class="p">(</span><span class="nx">propertyName</span><span class="o">:</span><span class="kt">string</span><span class="p">,</span><span class="nx">changedValue</span><span class="o">:</span><span class="kt">any?</span><span class="p">)</span></code> </p>
|
|
<blockquote>
|
|
<p>프로퍼티 변경시 <code>:GetPropertyChangedSignal</code> 에 등록된 함수가 실행되도록 이 함수를 호출해 주어야 합니다. 일반적으로 <code class="highlight"><span class="nx">self</span><span class="p">.</span><span class="nx">a</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">1</span></code> 과 같은 방식으로 바로 값을 설정하는 경우 자동적으로 이 함수가 실행되지만, 텍스트 박스의 텍스트 처럼 객체의 변경사항을 연동해야 하는 경우 이 함수를 사용할 수 있습니다. <code>changedValue</code> 는 선택사항이며, 주어지지 않으면 <code class="highlight"><span class="nx">self</span><span class="p">[</span><span class="nx">propertyName</span><span class="p">]</span></code>을 반환합니다.
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span>
|
|
<span class="normal">24</span>
|
|
<span class="normal">25</span>
|
|
<span class="normal">26</span>
|
|
<span class="normal">27</span>
|
|
<span class="normal">28</span>
|
|
<span class="normal">29</span>
|
|
<span class="normal">30</span>
|
|
<span class="normal">31</span>
|
|
<span class="normal">32</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">ScreenGUI</span> <span class="o">=</span> <span class="n">script</span><span class="p">.</span><span class="n">Parent</span>
|
|
<span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
<span class="kd">local</span> <span class="n">Mount</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Mount</span>
|
|
<span class="kd">local</span> <span class="n">Evnet</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Event</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="n">self</span> <span class="s2">"_box"</span><span class="p">;</span>
|
|
<span class="n">Text</span> <span class="o">=</span> <span class="s2">"test"</span><span class="p">;</span>
|
|
<span class="n">Size</span> <span class="o">=</span> <span class="n">UDim2</span><span class="p">.</span><span class="n">fromOffset</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span><span class="mi">200</span><span class="p">);</span>
|
|
<span class="p">[</span><span class="n">Evnet</span><span class="p">.</span><span class="n">Prop</span> <span class="s2">"Text"</span><span class="p">]</span> <span class="o">=</span> <span class="kr">function</span> <span class="p">(</span><span class="n">this</span><span class="p">,</span><span class="n">newValue</span><span class="p">)</span>
|
|
<span class="n">self</span><span class="p">:</span><span class="n">EmitPropertyChangedSignal</span><span class="p">(</span><span class="s2">"Text"</span><span class="p">,</span><span class="n">newValue</span><span class="p">)</span>
|
|
<span class="kr">end</span><span class="p">;</span>
|
|
<span class="c1">-- [Evnet.Prop "Text"] = self "Text" 와 동일합니다.</span>
|
|
<span class="c1">-- self(name:string) 문법으로 변경 이벤트 역시 링크</span>
|
|
<span class="c1">-- 할 수 있습니다.</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">.</span><span class="nc">Getter</span><span class="p">.</span><span class="nf">Text</span><span class="p">(</span><span class="n">self</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">self</span><span class="p">.</span><span class="n">_box</span><span class="p">.</span><span class="n">Text</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="kd">local</span> <span class="n">myButton</span> <span class="o">=</span> <span class="n">myImported</span><span class="p">()</span>
|
|
<span class="n">myButton</span><span class="p">:</span><span class="n">GetPropertyChangedSignal</span><span class="p">(</span><span class="s2">"Text"</span><span class="p">):</span><span class="n">Connect</span><span class="p">(</span><span class="kr">function</span><span class="p">()</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">myButton</span><span class="p">.</span><span class="n">Text</span><span class="p">)</span>
|
|
<span class="kr">end</span><span class="p">)</span>
|
|
<span class="n">Mount</span><span class="p">(</span><span class="n">ScreenGUI</span><span class="p">,</span> <span class="n">myButton</span><span class="p">)</span>
|
|
</code></pre></div></td></tr></table></div></p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><mark>Event</mark> <code class="highlight"><span class="nx">.ChildAdded</span><span class="o">:</span><span class="kt">Connect</span><span class="p">((</span><span class="nx">child</span><span class="p">)</span><span class="o">-></span><span class="p">())</span><span class="o">-></span><span class="nx">Connection</span></code> </p>
|
|
<blockquote>
|
|
<p>자식 오브젝트가 추가될 때 발생하는 이벤트입니다. <code class="highlight"><span class="o">:</span><span class="nx">Init</span></code> 에서 사용하면 옵션으로 넣은 자식 오브젝트가 이 이벤트를 통해 얻어질 수 있으며, <code class="highlight"><span class="o">:</span><span class="nx">AfterRender</span></code> 에서는 추후 <code>Mount</code> 를 통해 추가되는 자식 오브젝트만 이 이벤트로 얻어질 수 있습니다.<br />
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span>
|
|
<span class="normal">24</span>
|
|
<span class="normal">25</span>
|
|
<span class="normal">26</span>
|
|
<span class="normal">27</span>
|
|
<span class="normal">28</span>
|
|
<span class="normal">29</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
<span class="kd">local</span> <span class="n">Mount</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Mount</span>
|
|
<span class="kd">local</span> <span class="n">Evnet</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Event</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="n">self</span> <span class="s2">"_holder"</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">AfterRender</span><span class="p">()</span>
|
|
<span class="n">self</span><span class="p">.</span><span class="n">ChildAdded</span><span class="p">:</span><span class="n">Connect</span><span class="p">(</span><span class="kr">function</span><span class="p">(</span><span class="n">child</span><span class="p">)</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">child</span><span class="p">.</span><span class="n">Name</span><span class="p">)</span>
|
|
<span class="kr">end</span><span class="p">)</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="kd">local</span> <span class="n">myButton</span> <span class="o">=</span> <span class="n">myImported</span><span class="p">{</span>
|
|
<span class="c1">-- Init 에 ChildAdded 를 넣은것이 아니기 때문에 출력되지 않습니다.</span>
|
|
<span class="c1">-- 그러나 AfterRender 에 :GetChildren 을 넣어 이 오브젝트를</span>
|
|
<span class="c1">-- 얻어올 수 있습니다.</span>
|
|
<span class="n">TextButton</span> <span class="p">{</span> <span class="n">Name</span> <span class="o">=</span> <span class="s2">"Hello "</span><span class="p">};</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="n">Mount</span><span class="p">(</span><span class="n">myButton</span><span class="p">,</span> <span class="n">TextButton</span><span class="p">{</span> <span class="n">Name</span> <span class="o">=</span> <span class="s2">"Hello"</span> <span class="p">})</span>
|
|
<span class="n">Mount</span><span class="p">(</span><span class="n">myButton</span><span class="p">,</span> <span class="n">TextButton</span><span class="p">{</span> <span class="n">Name</span> <span class="o">=</span> <span class="s2">"World"</span> <span class="p">})</span>
|
|
</code></pre></div></td></tr></table></div></p>
|
|
</blockquote>
|
|
<hr />
|
|
<p><code class="highlight"><span class="o">:</span><span class="nx">GetChildren</span><span class="p">()</span></code> </p>
|
|
<blockquote>
|
|
<p>자식 오브젝트들을 가져오는 함수입니다. <code>:Init()</code> 에서는 빈 테이블을 반환하고, <code>AfterRender</code> 에서는 옵션에 들어간 자식 오브젝트들이 담긴 테이블을 반환합니다. 자식의 순서는 일정하지 않습니다.
|
|
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
|
|
<span class="normal"> 2</span>
|
|
<span class="normal"> 3</span>
|
|
<span class="normal"> 4</span>
|
|
<span class="normal"> 5</span>
|
|
<span class="normal"> 6</span>
|
|
<span class="normal"> 7</span>
|
|
<span class="normal"> 8</span>
|
|
<span class="normal"> 9</span>
|
|
<span class="normal">10</span>
|
|
<span class="normal">11</span>
|
|
<span class="normal">12</span>
|
|
<span class="normal">13</span>
|
|
<span class="normal">14</span>
|
|
<span class="normal">15</span>
|
|
<span class="normal">16</span>
|
|
<span class="normal">17</span>
|
|
<span class="normal">18</span>
|
|
<span class="normal">19</span>
|
|
<span class="normal">20</span>
|
|
<span class="normal">21</span>
|
|
<span class="normal">22</span>
|
|
<span class="normal">23</span>
|
|
<span class="normal">24</span>
|
|
<span class="normal">25</span>
|
|
<span class="normal">26</span>
|
|
<span class="normal">27</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kd">local</span> <span class="n">Quad</span> <span class="o">=</span> <span class="nb">require</span><span class="p">(</span><span class="n">path</span><span class="p">.</span><span class="n">to</span><span class="p">.</span><span class="n">module</span><span class="p">).</span><span class="n">Init</span><span class="p">()</span>
|
|
<span class="kd">local</span> <span class="n">Class</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Class</span>
|
|
<span class="kd">local</span> <span class="n">Mount</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Mount</span>
|
|
<span class="kd">local</span> <span class="n">Evnet</span> <span class="o">=</span> <span class="n">Quad</span><span class="p">.</span><span class="n">Event</span>
|
|
|
|
<span class="kd">local</span> <span class="n">TextButton</span> <span class="o">=</span> <span class="n">Class</span> <span class="s2">"TextButton"</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myClass</span> <span class="o">=</span> <span class="n">Class</span><span class="p">.</span><span class="n">Extend</span><span class="p">()</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">Render</span><span class="p">(</span><span class="n">props</span><span class="p">)</span>
|
|
<span class="kr">return</span> <span class="n">TextButton</span> <span class="p">{</span>
|
|
<span class="n">self</span> <span class="s2">"_holder"</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">function</span> <span class="nc">myClass</span><span class="p">:</span><span class="nf">AfterRender</span><span class="p">()</span>
|
|
<span class="kr">for</span> <span class="n">i</span><span class="p">,</span><span class="n">v</span> <span class="kr">in</span> <span class="nb">ipairs</span><span class="p">(</span><span class="n">self</span><span class="p">:</span><span class="n">GetChildren</span><span class="p">())</span> <span class="kr">do</span>
|
|
<span class="nb">print</span><span class="p">(</span><span class="n">v</span><span class="p">.</span><span class="n">Name</span><span class="p">)</span>
|
|
<span class="kr">end</span>
|
|
<span class="kr">end</span>
|
|
|
|
<span class="kd">local</span> <span class="n">myImported</span> <span class="o">=</span> <span class="n">Class</span><span class="p">(</span><span class="n">myClass</span><span class="p">)</span>
|
|
<span class="kd">local</span> <span class="n">myButton</span> <span class="o">=</span> <span class="n">myImported</span><span class="p">{</span>
|
|
<span class="n">TextButton</span> <span class="p">{</span> <span class="n">Name</span> <span class="o">=</span> <span class="s2">"Hello World"</span><span class="p">};</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="c1">-- 나중에 추가하는 오브젝트는 출력되지 않습니다.</span>
|
|
<span class="n">Mount</span><span class="p">(</span><span class="n">myButton</span><span class="p">,</span> <span class="n">TextButton</span><span class="p">{</span> <span class="n">Name</span> <span class="o">=</span> <span class="s2">"Hello"</span> <span class="p">})</span>
|
|
<span class="n">Mount</span><span class="p">(</span><span class="n">myButton</span><span class="p">,</span> <span class="n">TextButton</span><span class="p">{</span> <span class="n">Name</span> <span class="o">=</span> <span class="s2">"World"</span> <span class="p">})</span>
|
|
</code></pre></div></td></tr></table></div></p>
|
|
</blockquote>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<a href="#" class="md-top md-icon" data-md-component="top" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
|
|
맨위로
|
|
</a>
|
|
|
|
</main>
|
|
|
|
<footer class="md-footer">
|
|
|
|
|
|
|
|
<nav class="md-footer__inner md-grid" aria-label="Footer" >
|
|
|
|
|
|
<a href="../10_signal/" class="md-footer__link md-footer__link--prev" aria-label="이전: Signal" rel="prev">
|
|
<div class="md-footer__button md-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
|
|
</div>
|
|
<div class="md-footer__title">
|
|
<div class="md-ellipsis">
|
|
<span class="md-footer__direction">
|
|
이전
|
|
</span>
|
|
Signal
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="../../reference/" class="md-footer__link md-footer__link--next" aria-label="다음: Reference" rel="next">
|
|
<div class="md-footer__title">
|
|
<div class="md-ellipsis">
|
|
<span class="md-footer__direction">
|
|
다음
|
|
</span>
|
|
Reference
|
|
</div>
|
|
</div>
|
|
<div class="md-footer__button md-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
|
|
</div>
|
|
</a>
|
|
|
|
</nav>
|
|
|
|
|
|
<div class="md-footer-meta md-typeset">
|
|
<div class="md-footer-meta__inner md-grid">
|
|
<div class="md-copyright">
|
|
|
|
<div class="md-copyright__highlight">
|
|
Copyright © 2020 - 2023 Qwreey
|
|
</div>
|
|
|
|
|
|
Made with
|
|
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
|
|
Material for MkDocs
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="md-social">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/qwreey75" target="_blank" rel="noopener" title="github.com" class="md-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://stella.place/@qwreey" target="_blank" rel="noopener me" title="stella.place" class="md-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<div class="md-dialog" data-md-component="dialog">
|
|
<div class="md-dialog__inner md-typeset"></div>
|
|
</div>
|
|
|
|
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.indexes", "navigation.footer", "navigation.tabs", "navigation.top", "toc.integrate", "content.code.copy"], "search": "../../assets/javascripts/workers/search.208ed371.min.js", "translations": {"clipboard.copied": "\ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub428", "clipboard.copy": "\ud074\ub9bd\ubcf4\ub4dc\ub85c \ubcf5\uc0ac", "search.result.more.one": "\uc774 \ubb38\uc11c\uc5d0\uc11c 1\uac1c\uc758 \uac80\uc0c9 \uacb0\uacfc \ub354 \ubcf4\uae30", "search.result.more.other": "\uc774 \ubb38\uc11c\uc5d0\uc11c #\uac1c\uc758 \uac80\uc0c9 \uacb0\uacfc \ub354 \ubcf4\uae30", "search.result.none": "\uac80\uc0c9\uc5b4\uc640 \uc77c\uce58\ud558\ub294 \ubb38\uc11c\uac00 \uc5c6\uc2b5\ub2c8\ub2e4", "search.result.one": "1\uac1c\uc758 \uc77c\uce58\ud558\ub294 \ubb38\uc11c", "search.result.other": "#\uac1c\uc758 \uc77c\uce58\ud558\ub294 \ubb38\uc11c", "search.result.placeholder": "\uac80\uc0c9\uc5b4\ub97c \uc785\ub825\ud558\uc138\uc694", "search.result.term.missing": "\ud3ec\ud568\ub418\uc9c0 \uc54a\uc740 \uac80\uc0c9\uc5b4", "select.version": "\ubc84\uc804 \uc120\ud0dd"}}</script>
|
|
|
|
|
|
<script src="../../assets/javascripts/bundle.2a6f1dda.min.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |