Visual scripting in CT.JS -introduction

Summary

このスクリプトは、C.Jのためのゲームエンジンの大きなアップデートについて説明しています。注目の焦点は、視覚スクリプト機能の追加です。2年間にわたって議論されてきたこの機能は、開発パイプラインに取り入れられ、ついに完成しました。新しいプロジェクトを作成し、言語としてCoffeeScriptが利用できますが、将来的にはJavaScriptに置き換えられます。CatnipというブロックバージョンのJavaScriptを使用して、コードが変換されます。プレイヤーの移動を制御するシンプルなデモンストレーションを作成し、マウスポインタで操作できるようにします。また、カプセル化された物理エンジンを使用して、ゲームオブジェクトに物理学を適用する方法も紹介されています。最後に、スコアシステムを実装する方法と、プロパティと変数の使い分けについても触れています。このアップデートは、視覚スクリプトを使用してゲーム開発を楽しむ人々にとって非常に魅力的です。

Takeaways

• 🚀 新機能の追加：C.J（Corgi Jam）のゲームエンジンに視覚スクリプトが追加されました。
• 📈 開発プロセス：2年間で視覚スクリプトのアイデアが議論され、開発パイプラインに沿って進化しました。
• 🔍 言語の変更：Coffee Scriptが将来的にJavaScriptの簡略化されたバージョンに置き換えられますが、現在の主な言語はJavaScriptです。
• 🎨 ビジュアルスクリプト：コードをブロックとして視覚的に表現し、後でJavaScriptに変換されます。
• 🛠️ テンプレートの作成：新しいプロジェクトで、プレイヤーや床のようなプレースホルダーアセットを作成し、それらをワールドに追加します。
• 🖱️ プレイヤーの制御：マウスポインタを使用してプレイヤーオブジェクトを移動させ、マウスポインタの非表示に設定します。
• 🎮 ゲームオブジェクト：テクスチャと違って、ゲームオブジェクトとしてワールドに配置できるテンプレートを作成します。
• 🔄 イベントの活用：フレームの開始と終了時にイベントを活用し、プレイヤーの移動やUIの描画などのロジックを実装します。
• 🌈 色変化：プレイヤーが床と接触しているかどうかによって色を変えるロジックを実装しました。
• 🧩 カットモジュール：C.Jの新しいノードを使用して、物理エンジンやオブジェクトの挙動を細かく制御できます。
• 🔍 検索機能：ノードを検索し、必要なカテゴリーに追加することで、より柔軟なスクリプト作成が可能になります。
• 🔑 プロパティと変数の使い分け：プロパティはプロジェクト全体で使用でき、変数は一時的なデータ保持に使われます。

Q & A

C.Jと呼ばれるゲームエンジンの最新アップデートで導入された新機能は何ですか？

C.Jのゲームエンジンの最新アップデートでは、ビジュアルスクリプト機能が導入されました。これは、ビジュアルプログラミングを使用してゲームのロジックを構築できるようになりました。

ビジュアルスクリプトを使用する前に、どの言語がC.Jで主に使われていましたか？

ビジュアルスクリプトを使用する前に、C.Jで主に使われてい语言はJavaScriptでした。C.Jは、JavaScriptをベースとした簡易化されたバージョンの言語を使用していました。

カットナイプ（Catnip）とは何ですか？

カットナイプは、JavaScriptのブロックバージョンです。ビジュアルプログラミングで使用され、コードは最終的にJavaScriptに変換されます。

ビジュアルスクリプトを使用して作成されたゲームの基本的なシーンはどのように構築されますか？

基本的なシーンは、プレイヤーのオブジェクトと床のオブジェクトを用意し、それらを新しいルームに追加することで構築されます。オブジェクトの座標や色、そして衝突オブジェクトの設定を行い、それらを中央に配置してシーンを完成させます。

プレイヤーオブジェクトをマウスで動かすために、ビジュアルスクリプトでどのような操作を行いますか？

プレイヤーオブジェクトをマウスで動かすためには、フレームの終了時にポインタのXY座標を取得し、それをプレイヤーオブジェクトの座標に適用する必要があります。また、マウスカーソルを非表示にするために、プロジェクトの設定でポインタのプロパティを変更します。

ゲームオブジェクトの衝突を検出するために、ビジュアルスクリプトでどのようなプロセスを使用しますか？

ゲームオブジェクトの衝突を検出するためには、「place」カテゴリを使用して、オブジェクトが他のオブジェクトと接触しているかどうかを判定します。もし接触していない場合、特定のアクション（例えば、オブジェクトの色を変える）を実行することができます。

ビジュアルスクリプトでオブジェクトの色を変更する際に、どのようなアプローチを取りますか？

オブジェクトの色を変更する際には、「set tint」ノードを使用します。これは、オブジェクトの色を指定した色に変更することができます。条件分岐を使用して、オブジェクトが衝突しているかどうかによって、色を変えることができます。

ゲームのスコアシステムを実装するために、プロパティと変数のどちらを使用すべきですか？

ゲームのスコアシステムを実装する場合は、プロパティを使用すべきです。プロパティは、プロジェクト全体でアクセスできるため、スコアを追跡するのに適しています。一方、変数は一時的な値を保持するのに使われます。

カットナイプの開発者が今後もアップデートを提供する予定はありますか？

はい、カットナイプの開発者は今後もアップデートを提供する予定であり、ビジュアルスクリプト機能はさらに強化され、変更が加えられる見込みです。

カットナイプを使用してゲームを作成する際には、どのような利点がありますか？

カットナイプを使用することで、プログラミング言語を知らなくてもゲームのロジックを構築できるため、ゲーム開発のハードルが下がります。また、ビジュアルプログラミングにより、コードのミスを減らすことができます。

カットナイプのビジュアルスクリプト機能は、どのような種類のゲーム開発者に向いていますか？

カットナイプのビジュアルスクリプト機能は、プログラミング経験が乏しい初心者ゲーム開発者にも扱いやすいです。また、プログラミングを知っているが、ビジュアルプログラミングで作業を効率化したい経験豊富な開発者にも役立ちます。

Outlines

00:00

🚀 C.J.S ゲームエンジンのビジュアルスクリプト機能紹介

C.J.S ゲームエンジンに新たに追加されたビジュアルスクリプト機能について紹介。開発者が2年間かけて期待していたこの機能がようやくリリースされ、プロジェクトの新規作成から、ビジュアルスクリプトを使用したシンプルなオブジェクトの移動の設定までを説明。また、ビジュアルスクリプトのイベント処理についても触れている。

05:01

🖱️ マウスによるオブジェクト操作と非表示設定

マウスを使用してオブジェクトを操作し、マウスポインタを非表示に設定する方法について説明。プロジェクトの設定でポインタのプロパティを変更し、ゲームオブジェクトの色変化をトリガーに応じて制御する方法が紹介されている。

10:01

🎨 ゲームの背景設定とプロパティの活用

ゲームの背景を設定し、アセットライブラリから選んだパターンを使用する方法について説明。また、プロパティと変数の違いについて触れ、スコアシステムのようなものをプロジェクト全体で使用する際にはプロパティを使用するべきだとアドバイスしている。最後に、ビジュアルスクリプトの楽しさと、これからも変化が加わる可能性について語っている。

Keywords

💡Visual Script

ビジュアルスクリプトは、プログラミング言語を視覚的に表現し、コードを記述することなくゲームのロジックを構築できるツールです。このビデオでは、C.J（CoffeeScript for JavaScript）の開発者が、ビジュアルスクリプトを使用してゲームエンジンの開発パイプラインを追跡し、新しいプロジェクトを作成しています。

💡Catnip Nodes

Catnip Nodesは、ビジュアルスクリプトのブロックバージョンであり、コードをより直感的に表現するのに使われます。ビデオでは、Catnip Nodesを使ってプレイヤーオブジェクトを制御し、マウスポインターに基づく移動を実現しています。

💡CoffeeScript

CoffeeScriptは、JavaScriptにコンパイルされるより簡潔なプログラミング言語です。ビデオでは、将来的にCoffeeScriptが別の言語に置き換えられると述べていますが、現在はC.Jで主に使用されています。

💡Collision Object

コリジョンオブジェクトは、ゲーム内の物体が接触または衝突したときの挙動を定義するプロパティです。ビデオでは、プレイヤーオブジェクトと床のコリジョンオブジェクトを設定し、衝突判定を行う方法が説明されています。

💡Template

テンプレートは、ゲームオブジェクトを作成するための事前定義された設定です。ビデオでは、プレイヤーと床のオブジェクトをテンプレートとして作成し、それらを新しいワールドに追加する方法が紹介されています。

💡On Events

On Eventsは、ゲームエンジンが特定のイベントを検知したときに実行されるアクションを定義する機能です。ビデオでは、フレームの開始と終了時に実行されるイベントを使用して、プレイヤーオブジェクトの移動を制御しています。

💡Pointer UI

Pointer UIは、マウスポインターの位置を取得し、ゲーム内のオブジェクトに影響を与えるために使用されます。ビデオでは、Pointer UIを使用してプレイヤーオブジェクトをマウスポインターで動かす方法が説明されています。

💡Tint

Tintは、ゲームオブジェクトの色合いを変更するプロパティです。ビデオでは、プレイヤーオブジェクトのTintを白にしてから、衝突判定に基づいて赤に変える方法が紹介されています。

💡Property

プロパティは、ゲームオブジェクトに関連付けられた変数で、ゲーム全体でアクセス可能です。ビデオでは、スコアを追跡するためにプロパティを使用し、その使用方法が説明されています。

💡Variable

変数は、一時的な値を保持するオブジェクトで、通常は特定のイベントまたは状況に限定して使用されます。ビデオでは、変数とプロパティの違いを説明し、一時的なブースト効果を実現するために変数を使用する例が示されています。

💡Nightly Build

ナイトリービルドは、ソフトウェア開発で定期的にコンパイルされるビルドのことで、新しい機能や修正をテストするのに使われます。ビデオでは、Catnip Nodesのナイトリービルドを使用しており、まだ実験的な機能であることが触れられています。

Highlights

C.J, a game engine, has introduced Visual Script after two years of development.

Visual Script is an experimental feature not yet available in the main branch.

CoffeeScript will be replaced in the future with a simplified version of JavaScript.

Catnip is a block version of JavaScript, which is the primary language used in C.J.

Creating new assets involves using the built-in Gallery and customizing placeholder assets.

The process of setting up a basic scene includes creating a floor and player object.

Visual Script nodes allow for simple movement control of objects using mouse input.

The frame end event is used for UI-related tasks, such as drawing on the screen.

Pointer category in Visual Script provides access to mouse coordinates for controlling game objects.

The project's cap mods allow for easy control of various game object properties.

Physics can be applied to game objects using the Mat.B Library.

Matter categories in nodes enable control over different physics behaviors like pushing.

Using the place category in Visual Script allows for collision detection without physics.

The if-else branch in Visual Script can be used to change object properties based on conditions.

Setting a tint on objects can be controlled through Visual Script nodes.

Custom loading screens and background changes can be implemented in the project settings.

Properties and variables in Visual Script have different scopes and uses within a project.

Creating a property allows for the use of a value throughout the entire project.

Variables in Visual Script are more suited for temporary use within a single event.

The introduction of Visual Script in C.J is expected to make game development more accessible.

Transcripts

huge update for the cc. JS update uh

game engine we have visual script and

finally after two years pretty much I've

been trying to follow this sort of

development pipeline there's been ideas

about visual scripton for C.J for a

while and like forums I forget where uh

so very interesting this is finally out

let's make a new project uh in the new

section here of the CGS this is the

nightly build by the way I forgot to

mention it's not available in the main

branch this is still an experimental

phase you can select obviously project

folder we have uh the language coffee

script which is actually going to be

replaced in the distant future with a

different language which is just a

simplified version of JavaScript uh and

JavaScript is what is used in CJs

primarily a simplified JavaScript

language and catnip is essentially just

a block version of JavaScript and order

the code is converted into JavaScript

afterwards so if you know how to use

JavaScript inside of c. JS you're

halfway there let's create some new

assets so a new one you can see we have

the ability to use the built-in Li uh

Gallery we have a bunch of assets there

let's just make some simple placeholder

assets I'm going to make one uh sort of

longer width maybe five 100 width

rectangle here set the filter to non we

don't want any text set the color to be

maybe s of a uh black just leave it

black or no just set to Red I like red

or dark dark Rudy red let's set this to

be our floor or platform whatever you

want to call it create and add another

one so let's create a new one uh no not

texture my bad we want to go to uh

placeholder texture let's set this to be

a round circle and set this to be uh o

we can call it the player this is what

we'll control set it to be non and

change the color to be a

my mouse is bugging out uh to be white

fully white and we're going to be able

to change the tint and all that when

it's white whereas if it's already got a

color it's not going to work it's like

pain in the house you got to add white

paint first before you can choose

whatever paint you want let's set the uh

Collision object to the center of the

image to be the center the Collision

shape to be Circle apply that same for

the floor set the origin of the image to

be in the middle if you don't do this

then it's going to be pivoted around

obviously top left handti corner or the

CL shape isn't going to be great uh so

once you got that you can create a new

texture from it and by right clipping

and create a new template for me I said

texture I meant template it allows you

to create an object that isn't a texture

but in fact is a template that you can

add into your world so let's create a

new world a room let's grab that new

room okay we have a new room here and

over here we have the two templates

these are different from the textures

textures are just images you can't place

just images in the world they they need

to be game objects essentially so let's

add in our Circle in the middle is of

our thing and down here our ground we

can actually go to the selection item up

here uh we can actually just grab both

and move them up a little bit so they're

more centered and there we go we can

apply this and now we have a basic scene

that we can launch and we haven't even

got into visual scrutin yet so let's go

and do that let's click on our player

and we can open up and see we have brand

new visual script to noes what we're

going to do is create a very simple sort

of movement not of setup so let's go

ahead you can see here on the on events

which uh gives us a bunch of different

events like on update which is the c one

frame start which means every single

frame at the start of the frame and we

also have a frame end which is one we're

going to use now which is every single

frame when the frame ends you use the

frame start to do like calculations and

stuff like that you use the frame end

typically to do UI type stuff like

drawing stuff on screen like scores or

Uh custom Mouse cursors stuff of that

nature so what we're going to do is

similar to a cust mouse cursor cursor

we're going to allow our uh Mouse to

control this player object so you can

see down here we have a bunch of

different categories you can click on

them to jump to those categories in the

movement we want to change the movement

of our object obviously so we're going

to set the x and Y2 and then pixels it's

blank so what we're going to do is you

can see we have a bunch of different

green boxes that fit in here X Y but

this is XY of the object we want XY of

our cursor let's go all the way down to

our pointer category and here you can

see we have our pointer X our pointer UI

X so let's grab that the UI of the

pointer well the pointer is essentially

the same thing but the UI is is the one

we really want it could work with

pointer uh just normal as well but let's

grab the UI for extra measure and there

we go now we have our new mouse but the

mouse actually is still visible I don't

really want the mouse to be visible so

let's go ahead to our project let's go

down to the cap mods and you can see in

cap mods here I'm just doing a detail

the C mods here we have pointer for

example which is what we saw down here

pointer and we also have place so all

these different C mods um C mods they

come with all the brand new nodes so you

can control them really easily for

example let's go ahead and grab the mat.

B Library which is essentially physics

you can apply 2D physics to your game

and now go back and you see we have

obviously good the Behavior Uh Collision

group physics enable physics you got all

the the the standard physics uh

properties and physics constraints but

also if you scroll down a little bit

more we have the matter category of our

nodes so now we can control all the

different matter for example uh uh

pushing it uh teleporting matter matter

push for example we can use that and you

see where it says copy if you go to the

top here to the properties you got this

and this is our object it's essentially

uh self in the code and then you can

object uh XY you can go down of to here

to the object uh gForce from its X and

it's y gForce value of maybe zero for

the X and like one like that this is how

you basically program your different NES

but also if you right clicking can do

delete them or duplicate we're going to

delete this because what we want to do

is actually uh go ahead to

our frame start and we're going to run a

small L calculation using the

place category the place cat mod which

allows you to detect overlays and stuff

like that but without using physics or

rigid bodies of that uh or anything of

that nature so let's go ahead and use

the uh detect if it's free the place is

free but as you can see I can't drag it

in because I can't detect whether or not

it's colled with anything yet because

it's one of those rounded bever noes you

need one of these uh different box type

edges on this one so what we can do is

instead of searching for everything if

you know what you're looking for instead

of looking for the different categories

to see where it is that node kept is if

you hover underneath or even on top of

this we have a little plus icon so if

you click it we have a new search so

what we're going to search for is a

condition so if we grab an

if uh and grab the if else Branch so if

and now we have a condition which is as

you can see the same uh outside um place

as here the same orange beveled Corners

that is a perfect fit obviously so what

we want to do is fill Lear the same as I

showed previously in the previous

example get the properties grab this as

in this player object it's XY so let's

go down to grab its

XY just to fill it in you know and uh

the uh Collision Group which we don't

actually have a collision group yet so

let's go to our assets open up our floor

and in the floor over here we can go to

our Collision group and call this and

very Innovative so let's call it flaw

again apply that and we can go back to

our player and here type

in floor there we go and we have nothing

to do yes so let's go ahead and grab

something to do so for example let's go

here type in set tint cuz I said we're

going to set it white on purpose so we

can apply any color we want later we're

going to set the tint to B and leave it

white and if not cuz what we're doing

here is obviously check in every single

frame at the start if the place of this

item is free as in it's not colliding

with anything else it's liberated it's

way from everybody else it it's not

colliding with any floor object if so

set the tint to stay white if not let's

go ahead and grab a new set tint

node and this tint is now going to be I

know pinkish maybe like a pinkish red I

don't want to have just red or we can

just grab a a just red on that side a

red so let's go ahead and play this now

cuz obviously it moves around with our

Mouse and we can go ahead and there we

go it's red and now white and red and

white and red and white and red and

white there we go and I actually went to

disable but I got lost in Cat mods I

actually originally wanted to show you

if you go down to Brandon we can hide

tjs and we can add a custom loading

screen as well I don't like the loading

so I'm going to set this to be black or

you know you could set it to be fully

white if you wanted to I just like a

black screen and instead of writing

something I'm just going to press space

that's going to be our loading screen

text a blank space so we're going to

have nothing until our actual game shows

up and I actually want to change the

background cuz I don't like this black

nothingness so let's add an asset let's

look at the asset Library we can have a

bunch of different shapes and stuff but

I want to

use this I like this sort of pattern

this brown background pattern let's go

ahead open it up set it to be a tiled

background set the Collision to be uh

the origin to be the middle and now go

down to the backgrounds add a background

and use the VG background yeah let's use

this drop down and set the depth to be

minus one so it's behind all our current

objects and there we go we have a little

project that we've made with uh just our

catod uh catnip nodes there we go Isn't

that cool and now maybe add damage

whenever it touches it with a variable

uh or something of that nature well I'm

not going to do too much I'm going to

end it in a second here uh but what we

can do go to the properties on the top

here and we can add a new property or

new variable now a variable and a

property is very different look it's

let's create a new variable let's call

it uh damage or score or something of

that nature score that's great we have a

new variable called score we don't

actually it's not appeared let's create

a new property call it

score yeah that appeared I don't know

why this it didn't appear so uh no

apparently not uh we are in a nightly

build so sometimes you'll have glitches

and bugs you do actually need to create

a variable can just set a variable so on

start let's create a variable by just

writing it a variable call it

um

hello oh we have a zero that appears

sometimes in front that's another bug uh

so we have set hello which isn't

actually a variable that we've created

uh to be zero and that is actually a not

not a temporary variable if you go to

this search here you can see it says

it's temporary it only exists for one

event what I wanted to show you is that

if you create new variable and then go

to one of these different events that

variable isn't going to appear CU it's

only allowed in a very limited uh uh

category uh that this object can use but

if you create a property you can see we

have a little F little box like icon you

can use that without throughout this

entire project from different uh

different rooms you can use it uh uh

from different objects you can access

that uh data that value so it's a much

better way if you want to use something

like a score system to use a property

than a variable if you want to use

something very temporary like uh yeah

anything that's temporary like a

temporary boost or temporary whatever it

is I don't really have an example in

mind then you can use this variable so

that's a very important difference but

like I said I'm not going to go much

further the video is long enough this is

just a quick introduction

or more like me also discovering catnip

with you guys this has come out a few

days ago it's really fun to play with

it's going to have a lot of changes in

the future so if you don't plan on

making full games with this but you can

definitely go and enjoy this uh it's

going to be really powerful really fun

and this is going to allow a lot more

people to use ct. JS I really do love

visual scripting so this is an engine

that I'm definitely going to be talking

about and hey it's been like a year

since I've uploaded to this channel so I

thought now that was a perfect

opportunity so I'll see you guys next

time and have fun