행복한 꽃
🎯 학습 목표:
- 배경색(Background Color)을 설정하고 스프라이트를 그립니다.
- 게임 루프(Update Interval)를 사용하여 주기적으로 이벤트를 발생시킵니다.
- 스프라이트 기준 발사체(Projectile from Sprite)를 생성합니다.
- 수명(Lifespan)을 설정하여 일정 시간 후 스프라이트가 사라지게 합니다.
- 조건문(If)을 사용하여 움직이는 방향에 따라 이미지를 뒤집습니다(Flip).
1
꽃과 배경 만들기
벌들에게 꿀을 나눠줄 예쁜 꽃을 만들어 봅시다.
||scene:장면||에서||scene:배경색 설정||을 가져와 연한 파랑(9)으로 설정합니다.||sprites:스프라이트||에서||variables(sprites):[mySprite]를 ~로 설정||블록을 가져옵니다.- 이미지 편집기에서 꽃을 그립니다.
let mySprite: Sprite = null
// @highlight
scene.setBackgroundColor(9)
// @highlight
mySprite = sprites.create(img`
. . . 4 . . . . . . 2 2 . . . .
. . . 4 4 4 3 . 3 2 2 . . . . .
. . . . 4 e 5 5 5 e 2 . . . . .
. . . . 3 5 5 5 5 5 3 . . . . .
. . . . . 5 5 e 5 5 . . . . . .
. . . . 3 5 5 5 5 5 3 . . . . .
. . . . 2 e 5 5 5 e 4 . . . . .
. . . . 2 2 3 7 3 4 4 4 . . . .
. . . 2 2 . . 7 . . . 4 . . . .
. . . . . . . 7 . . . . . . . .
. . . 7 7 7 . 7 . 7 7 . . . . .
. . . . 7 7 . 7 . 7 7 . . . . .
. . . . . 7 7 7 7 7 . . . . . .
. . . . . . 7 7 7 . . . . . . .
. . . . . . . 7 . . . . . . . .
. . . . . . . 7 . . . . . . . .
`, SpriteKind.Player)2
벌 생성하기 (주기적 실행)
일정 시간마다 꽃에서 벌이 나오도록 해봅시다.
► ||game:게임||에서 ||game:게임 업데이트시 [500] ms 마다|| 블록을 가져와 1000ms(1초)로 변경합니다.
► ||sprites:스프라이트||에서 ||variables(sprites):[projectile]을 [mySprite]에서 발사하는 발사체로 설정|| 블록을 가져와 안에 넣습니다.
► 벌 이미지를 그려주세요.
let mySprite: Sprite = null
scene.setBackgroundColor(9)
mySprite = sprites.create(img`
. . . 4 . . . . . . 2 2 . . . .
. . . 4 4 4 3 . 3 2 2 . . . . .
. . . . 4 e 5 5 5 e 2 . . . . .
. . . . 3 5 5 5 5 5 3 . . . . .
. . . . . 5 5 e 5 5 . . . . . .
. . . . 3 5 5 5 5 5 3 . . . . .
. . . . 2 e 5 5 5 e 4 . . . . .
. . . . 2 2 3 7 3 4 4 4 . . . .
. . . 2 2 . . 7 . . . 4 . . . .
. . . . . . . 7 . . . . . . . .
. . . 7 7 7 . 7 . 7 7 . . . . .
. . . . 7 7 . 7 . 7 7 . . . . .
. . . . . 7 7 7 7 7 . . . . . .
. . . . . . 7 7 7 . . . . . . .
. . . . . . . 7 . . . . . . . .
. . . . . . . 7 . . . . . . . .
`, SpriteKind.Player)
// @highlight
game.onUpdateInterval(1000, function () {
let projectile = sprites.createProjectileFromSprite(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . b b . . b . . . . . . .
. . . . . b b b b . . . . . . .
. . . . . . . b b . . . . . . .
. . . . . f 5 f 5 f . . . . . .
. . . . 5 f 5 f 5 f 1 . . . . .
. . . . 5 f 5 f 5 f 5 b . . . .
. . . . . . 5 f 5 f 5 . . . . .
. . . . . e . . . e . . . . . .
. . . . e . . . . e . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, mySprite, 0, 100)
})3
무작위 움직임과 수명 설정
벌들이 사방으로 흩어지게 만들고, 너무 멀리 가면 사라지게 합시다.
► ||math:계산||의 ||math:[0]부터 [10]까지의 정수 랜덤값|| 블록을 vx와 vy에 각각 넣습니다.
► 값의 범위를 -25에서 25로 변경합니다.
► ||sprites:[projectile] x 좌표 설정|| 블록을 가져와 x를 ||sprites:수명(lifespan)||으로 바꾼 뒤, 3000ms(3초)로 설정합니다.
let projectile: Sprite = null
game.onUpdateInterval(1000, function () {
projectile = sprites.createProjectileFromSprite(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . b b . . b . . . . . . .
. . . . . b b b b . . . . . . .
. . . . . . . b b . . . . . . .
. . . . . f 5 f 5 f . . . . . .
. . . . 5 f 5 f 5 f 1 . . . . .
. . . . 5 f 5 f 5 f 5 b . . . .
. . . . . . 5 f 5 f 5 . . . . .
. . . . . e . . . e . . . . . .
. . . . e . . . . e . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, mySprite, randint(-25, 25), randint(-25, 25))
projectile.lifespan = 3000
})4
방향에 맞춰 모습 뒤집기
벌이 왼쪽으로 날아갈 때는 얼굴도 왼쪽을 보게 해볼까요?
► ||logic:논리||에서 ||logic:만약(if) [참] 이면|| 블록을 가져옵니다.
► 조건에 ||logic:[0] < [0]|| 블록을 넣고, 앞쪽 0을 ||sprites:[projectile]의 [vx]|| 속도로 바꿉니다.
► 만약 vx < 0(왼쪽으로 이동 중)이라면, 고급 카테고리 영역에 있는 ||images:이미지|| 카테고리의 ||images:[picture] 좌우 뒤집기|| 블록을 사용해 이미지를 뒤집습니다.
► picture 자리에 ||sprites:[projectile]의 이미지||를 넣어야 합니다.
let projectile: Sprite = null
game.onUpdateInterval(1000, function () {
projectile = sprites.createProjectileFromSprite(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . b b . . b . . . . . . .
. . . . . b b b b . . . . . . .
. . . . . . . b b . . . . . . .
. . . . . f 5 f 5 f . . . . . .
. . . . 5 f 5 f 5 f 1 . . . . .
. . . . 5 f 5 f 5 f 5 b . . . .
. . . . . . 5 f 5 f 5 . . . . .
. . . . . e . . . e . . . . . .
. . . . e . . . . e . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, mySprite, randint(-25, 25), randint(-25, 25))
projectile.lifespan = 3000
if (projectile.vx < 0) {
projectile.image.flipX()
}
})🎉
완성!
축하합니다! 행복한 꽃과 벌들이 완성되었습니다.
꽃에서 벌들이 즐겁게 날아가는 모습을 감상해보세요.
아래는 완성된 전체 블록 코드입니다.
let projectile: Sprite = null
let mySprite: Sprite = null
scene.setBackgroundColor(9)
mySprite = sprites.create(img`
. . . 4 . . . . . . 2 2 . . . .
. . . 4 4 4 3 . 3 2 2 . . . . .
. . . . 4 e 5 5 5 e 2 . . . . .
. . . . 3 5 5 5 5 5 3 . . . . .
. . . . . 5 5 e 5 5 . . . . . .
. . . . 3 5 5 5 5 5 3 . . . . .
. . . . 2 e 5 5 5 e 4 . . . . .
. . . . 2 2 3 7 3 4 4 4 . . . .
. . . 2 2 . . 7 . . . 4 . . . .
. . . . . . . 7 . . . . . . . .
. . . 7 7 7 . 7 . 7 7 . . . . .
. . . . 7 7 . 7 . 7 7 . . . . .
. . . . . 7 7 7 7 7 . . . . . .
. . . . . . 7 7 7 . . . . . . .
. . . . . . . 7 . . . . . . . .
. . . . . . . 7 . . . . . . . .
`, SpriteKind.Player)
game.onUpdateInterval(1000, function () {
projectile = sprites.createProjectileFromSprite(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . b b . . b . . . . . . .
. . . . . b b b b . . . . . . .
. . . . . . . b b . . . . . . .
. . . . . f 5 f 5 f . . . . . .
. . . . 5 f 5 f 5 f 1 . . . . .
. . . . 5 f 5 f 5 f 5 b . . . .
. . . . . . 5 f 5 f 5 . . . . .
. . . . . e . . . e . . . . . .
. . . . e . . . . e . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, mySprite, randint(-25, 25), randint(-25, 25))
projectile.lifespan = 3000
if (projectile.vx < 0) {
projectile.image.flipX()
}
})