godot项目实战circle_jump（一）

资源来自于github上的开源项目https://github.com/kidscancode/circle_jump

步骤参考kidscancode网站的游戏教学

项目设置

首先新建一个circle_jump项目

修改屏幕尺寸为480X854

移动设备方向改为垂直

将拉伸模式设为2d 拉伸纵横比设为keep

勾选此项以使得鼠标能模拟手机触摸

完成项目设置后我们建立以下文件夹方便管理文件，并将下载好的资源复制过来

• objects存放游戏对象
• UI存放gui文件
• assets存放游戏资源

游戏对象

接下来我们只做玩家（jumper）和圆圈

jumper

添加以下节点

• Area2D（Jumper）
  • Sprite
  • CollisionPolygon2D
  • VisibilityNotifier2D

为Sprite添加纹理图片res://assets/images/jumper.png

将Sprite旋转90度

为CollisionPolygon2D添加一个三角形状

保存场景jumper.tscn并为其添加脚本jumper.gd

给Jumper连接信号area_entered()

jumper.gd

extends Area2D

var velocity = Vector2(100, 0)
var jump_speed = 1000
var target = null

func _unhandled_input(event):
	if target and event is InputEventScreenTouch and event.pressed:
		jump()

func jump():
	target = null
	velocity = transform.x * jump_speed

func _on_Jumper_area_entered(area):
	target = area
	velocity = Vector2()

func _physics_process(delta):
	if target:
		transform = target.orbit_position.global_transform
	else:
		position += velocity * delta

着色器

使用着色器，以便我们可以自定义Sprite的颜色

在Sprite的Material属性中添加一个新的ShaderMaterial，再新建一个新的Shader

点击Shade按钮在编辑其中添加以下代码

shader_type canvas_item;

uniform vec4 color : hint_color;

void fragment() {
    COLOR.rgb = color.rgb;
    COLOR.a = texture(TEXTURE, UV).a;
}

并可适当修改Color属性的值

为了方便复用，将shader保存为res://objects/color.shader

圆圈

添加以下节点

• Area2D （Circle）
  • Sprite
  • CollisionShape2D
  • Node2D（Pivot）
    • Position2D（OrbitPosition）

使用res://assets/images/circle_1.png作为Sprite

添加圆形的碰撞区域

适当修改轨道位置

新建shader并加载之前保存的shader

将场景保存为circle.tscn并添加circle.gd脚本

extends Area2D

onready var orbit_position = $Pivot/OrbitPosition
var radius = 100
var rotation_speed = PI

func _ready():
    init()

func init(_radius=radius):
    radius = _radius
    $CollisionShape2D.shape = $CollisionShape2D.shape.duplicate()
    $CollisionShape2D.shape.radius = radius
    var img_size = $Sprite.texture.get_size().x / 2
    $Sprite.scale = Vector2(1, 1) * radius / img_size
    orbit_position.position.x = radius + 25

func _process(delta):
    $Pivot.rotation += rotation_speed * delta

测试

新建Main.tscn

添加Circle和Jumper，并摆放到适当位置

运行场景