资源来自于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():
    # 以jump_speed速度跳出，target表示没有在圆圈上
    target = null
    velocity = transform.x * jump_speed

func _on_Jumper_area_entered(area):
    # 连接area_entered信号 检测与圆圈碰撞 让箭头停止
    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，并摆放到适当位置

运行场景

Last modification：August 11th, 2020 at 01:17 am
© 允许规范转载