How to create a Wallpaper step by step guide



  • The wizard for creating wallpaper is not in place yet but you can still create one simply by creating a project.json
    https://kelteseth.gitlab.io/ScreenPlayDocs/project/project/
    Project setup:

    1. Create a new folder inside your save loctation (C:\Program Files (x86)\Steam\steamapps\workshop\content\672870)
      efed4d61-397c-4453-8490-93635be213c7-grafik.png

    2. Create a text file and call it project.json (not project.json.txt)

    3. Past this into it
      project.json

    {
        "description": "This is a description",
        "file": "file.webm",
        "preview": "preview.jpg",
        "previewGIF": "preview.gif",
        "previewWEBM": "preview.webm",
        "title": "My title",
        "type": "videoWallpaper"
    }
    

    Change the content to your liking. For example there are different types of wallpaper:
    https://kelteseth.gitlab.io/ScreenPlayDocs/project/project/#wallpaper-filetype-options

    // A QML wallpaper:
    "file": "main.qml",
    "type": "qmlWallpaper"
    
    // A HTML wallpaper:
    "file": "main.html",
    "type": "htmlWallpaper"
    
    // A Video wallpaper:
    "file": "video.webm",
    "type": "videoWallpaper"
    
    
    1. Now you can refresh (F5 or pull to refresh) at the Installed tab.
      1473094a-07bb-4f93-aa35-b6c322bf4eb0-grafik.png

    Change the content to your liking, for example:

    7dca1e00-8932-450a-aa50-49dc835ad014-grafik.png

    dec03e89-3fe8-4358-a89a-ec8610b6d011-grafik.png
    project.json

    {
        "description": "Quiet particles",
        "file": "main.qml",
        "monetization": false,
        "preview": "preview.png",
        "previewGIF": "preview.gif",
        "properties": {
            "Attractor": {
                "attStrength": {
                    "from": 0,
                    "stepSize": 100,
                    "to": 100000,
                    "type": "slider",
                    "value": 8000000
                }
            },
            "Emitter": {
                "emitRate": {
                    "from": 0,
                    "stepSize": 1,
                    "to": 2500,
                    "type": "slider",
                    "value": 25
                },
                "endSize": {
                    "from": 0,
                    "stepSize": 1,
                    "to": 100,
                    "type": "slider",
                    "value": 18
                },
                "isEnabled": {
                    "type": "bool",
                    "value": true
                },
                "lifeSpan": {
                    "from": 0,
                    "stepSize": 100,
                    "to": 10000,
                    "type": "slider",
                    "value": 5000
                },
                "sizeVariation": {
                    "from": 0,
                    "stepSize": 1,
                    "to": 10,
                    "type": "slider",
                    "value": 4
                }
            },
            "ImageParticle": {
                "color": {
                    "type": "color",
                    "value": "#ffffff"
                },
                "imgOpacity": {
                    "from": 0,
                    "stepSize":" .05",
                    "to": 1,
                    "type": "slider",
                    "value": 1
                },
                "source": {
                    "formats": "*.png,*.jpg",
                    "type": "file",
                    "value": "backgroundGlow.png"
                }
            }
        },
        "tags": [
            "particles"
        ],
        "title": "QML particles",
        "type": "qmlWallpaper"
    }
    
    

    main.qml

    import QtQuick 2.9
    import QtGraphicalEffects 1.0
    import QtQuick.Particles 2.0
    
    Item {
        id: root
        anchors.fill: parent
    
        property int attStrength: 8000000
        //Emitter
        property bool isEnabled: true
        property int emitRate: 25
        property int lifeSpan: 5000
        property int size: 4
        property int endSize: 8
        property int sizeVariation: 4
    
        //Image
        property real imgOpacity: .75
    
    
        LinearGradient {
            id: gradient
            anchors.fill: parent
            cached: true
            start: Qt.point(0, 0)
            end: Qt.point(gradient.width, gradient.height)
            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    color: "#199EF1"
                }
                GradientStop {
                    position: 1.0
                    color: "#092E6C"
                }
            }
        }
    
        Item {
            anchors.fill: parent
    
            MouseArea {
                id: ma
                anchors.fill: parent
                hoverEnabled: true
                Component.onCompleted: {
                    attractor.pointX = parent.width * .5
                    attractor.pointY = 0
                }
    
                onPressed: {
                    //attractor.enabled = true
                }
                onPositionChanged: {
                    attractor.pointX = mouseX
                    print()
                    attractor.pointY = mouseY
                    if (ma.pressed) {
                    }
                }
                onReleased: {
                    //attractor.enabled = false
                }
            }
    
            Attractor {
                id: attractor
                system: particleSystem
                affectedParameter: Attractor.Acceleration
                strength: root.attStrength
                proportionalToDistance: Attractor.InverseQuadratic
                anchors{
                    top:parent.top
                    topMargin: 100
                    horizontalCenter: parent.horizontalCenter
    
                }
            }
    
            ParticleSystem {
                id: particleSystem
            }
    
            Emitter {
                id: emitter
                enabled: root.isEnabled
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    bottom: parent.bottom
                }
    
                width: parent.width
                height: parent.height * .5
                system: particleSystem
                emitRate: root.emitRate
                lifeSpan: root.lifeSpan
                lifeSpanVariation: 1000
                size: root.size
                endSize: root.endSize
                sizeVariation: root.sizeVariation
                velocity: AngleDirection {
                    angle: -90
                    magnitude: 50
                    magnitudeVariation: 25
                    angleVariation: 10
                }
            }
    
            ImageParticle {
                height: 16
                width: 16
                source: "dot.png"
                system: particleSystem
                opacity: root.imgOpacity
            }
    
            Image {
                id: bgGlow
                width: parent.width * .75
                height: width
                opacity: .3
                source: "backgroundGlow.png"
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    bottom: parent.bottom
                    bottomMargin: -width * .65
                }
                SequentialAnimation on opacity {
                    loops: Animation.Infinite
    
                    OpacityAnimator {
                        from: 0
                        to: .3
                        duration: 100000
                    }
                    OpacityAnimator {
                        from: .4
                        to: 0
                        duration: 100000
                    }
                }
            }
        }
    }
    
    

Log in to reply