【开源组件】跟随鼠标、面向鼠标的自定义组件

立笔犊

是这样子的，因为最近开学了比较忙，所以很久没逛RenPy论坛了，今天点进来收一波硬币，然后发现版主因为我的一些回答升级了我的用户组。虽然说是个小论坛，不过还是感谢赏识，因此我会把我暑假期间摸索出来的一点东西按兴趣和时间发成教程。
我会尽量写得实用、通俗易懂，不过因为不想花太多时间所以会尽量简练。
也可以关注我的微博，虽然很少发东西：https://weibo.com/2804906463/profile?topnav=1&wvr=6

那么接下来是本次的主题：基于“用户自定义组件”的跟随鼠标、面向鼠标的自定义组件
用人话来说就是：当用户移动鼠标时，一个图片会跟着鼠标走，并且总是朝向鼠标。

先上成果吧，这个是演示视频，顺带演示的图片，看了就知道是个什么东西了。
演示视频.zip (368.72 KB, 下载次数: 81)

2019-9-18 00:35 上传

点击文件名下载附件

然后是可视组件的代码。

[RenPy] 纯文本查看 复制代码

init python:
    import math
    #一个根据鼠标位置旋转的组件
    class Appearing(renpy.Displayable):


        def __init__(self, child,**kwargs):


            # 向renpy.Displayable构造器传入额外的特性(property)。
            super(Appearing, self).__init__(**kwargs)


            # 子组件。
            #图片位置
            self.xpos,self.ypos = 10,10
            #鼠标位置
            self.x,self.y=0,0
            self.child = renpy.displayable(child)
            self.repulsor_pos=(0,0)
            self.rotate = 0


        def render(self, width, height, st, at):


            # 创建一个变换(transform)，调整子组件的rotate。
            t = Transform(child=self.child,rotate=self.rotate)


            # 创建一个子组件的渲染器。
            child_render = renpy.render(t, width, height, st, at)


            # 或者子组件尺寸。
            self.width, self.height = child_render.get_size()


            # 创建返回的渲染器。
            render = renpy.Render(self.width, self.height)


            # 以blit方式将子组件的渲染器信息复制我们的渲染器。
            #render.blit(child_render, (0, 0))


            dx=self.x-self.xpos
            dy=self.y-self.ypos
            dl=math.hypot(dx,dy)
            if dl >30 and dl <50:
                #离得比较近，啥也不做，在原来的地点刷新即可
                render.place(t,self.xpos,self.ypos,100,100)
            else:
                distance=(40-dl)/50
                self.xpos-=distance*dx/dl
                self.ypos-=distance*dy/dl
                render.place(t,self.xpos,self.ypos,100,100)


                # 返回渲染器。
            return render


        def event(self, ev, x, y, st):
            if (x,y) is None:
                return None
            self.rotate=math.degrees(math.atan2(self.y-self.ypos-60,self.x-self.xpos-60))+180


            self.x=x
            self.y=y
            renpy.redraw(self, 0)


            # 将事件传给各子组件。
            return self.child.event(ev, x, y, st)


        def visit(self):
            return [ self.child ]

把这段代码加在任意一个rpy文件里，然后把图片拖到image文件夹中，再在任意一个界面screen（如main_menu）中加入add Appearing("apoto.png")即可在该界面中显示出该组件。


自己使用的时候把参数图片名换成自己想要的图片就行了。因为自定义可视组件本身有一定难度，所以对外接口就只写了一个显示的图片名，其他参数都是类内部定义好的。
如果想要修改内部参数，比如想让图片移动速度变快，或者调整图片面向的方向，或者更改更多的参数，可能需要把上述代码看懂之后自行修改了。


最后简单讲解一下代码。
关于用户定义的可视组件中各种函数、参数什么的我会专门开一个帖子讲，且需要一定的面向对象编程基础，这里就先粗略地提要一下这个组件要的基本原理。
1、每次移动鼠标会触发事件，每次触发事件时根据图片位置和鼠标位置计算出应该旋转的角度，然后重新绘制组件，引发render函数。
2、在render函数构造出调整旋转的变换，用这个变换渲染该组件，从而做出面向鼠标的效果。
3、利用render的replace函数调整组件位置。计算出方向和距离，根据距离判断是否移动、移动多少。
从而实现以上功能。

BuErShen

话说，用来做啥小游戏好腻......？