From c72e08ef0f25bfb3fbb18e479f491d87096f04de Mon Sep 17 00:00:00 2001 From: asdfgasfhsn Date: Thu, 9 May 2019 16:01:04 +1000 Subject: [PATCH] Add starfield bg, adjust collection/grid views, fix fonts Note: fonts do not seem to load reliably on windows, defaulting to Pegasus defaults for now :-( --- Carousel.qml | 2 +- CollectionLogo.qml | 25 ++----------- CollectionsView.qml | 27 ++++++++++++-- DetailsView.qml | 3 +- GameDetailsText.qml | 2 +- GameGridItem.qml | 23 +++++++++--- GameInfoText.qml | 2 +- HeaderText.qml | 5 +-- MetaBox.qml | 5 ++- RatingDot.qml | 4 +- StarField.qml | 76 ++++++++++++++++++++++++++++++++++++++ assets/starfield/star.png | Bin 0 -> 259 bytes theme.cfg | 3 ++ theme.qml | 21 ++++++++++- 14 files changed, 153 insertions(+), 45 deletions(-) create mode 100644 StarField.qml create mode 100644 assets/starfield/star.png diff --git a/Carousel.qml b/Carousel.qml index 707185a..2d204de 100644 --- a/Carousel.qml +++ b/Carousel.qml @@ -6,7 +6,7 @@ PathView { id: root property int itemWidth // set this on the calling site - readonly property int pathWidth: pathItemCount * itemWidth + readonly property int pathWidth: pathItemCount * itemWidth signal itemSelected diff --git a/CollectionLogo.qml b/CollectionLogo.qml index 708a8d0..adfbdfb 100644 --- a/CollectionLogo.qml +++ b/CollectionLogo.qml @@ -1,6 +1,6 @@ import QtQuick 2.8 import QtGraphicalEffects 1.12 - +import "utils.js" as Utils // The collection logo on the collection carousel. Just an image that gets scaled // and more visible when selected. Also has a fallback text if there's no image. Item { @@ -16,8 +16,8 @@ Item { Image { id: controllerImage - width: vpx(364) - height: vpx(364) + width: vpx(320) + height: vpx(320) anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter fillMode: Image.PreserveAspectFit @@ -27,23 +27,4 @@ Item { scale: selected ? 1.0 : 0.555 Behavior on scale { NumberAnimation { duration: 333 } } } - layer.enabled: selected ? true : false - layer.effect: DropShadow { - fast: true - horizontalOffset: 0 - verticalOffset: 0 - spread: 0.333 - radius: vpx(40) - samples: 20 - color: "#909932CC" - transparentBorder: true - SequentialAnimation on color { - loops: Animation.Infinite - ColorAnimation { from: "#909932CC"; to: "#900000FF"; duration: 10000 } - ColorAnimation { from: "#900000FF"; to: "#909932CC"; duration: 10000 } - } - } - - - } diff --git a/CollectionsView.qml b/CollectionsView.qml index 4eecc67..ae3c6dd 100644 --- a/CollectionsView.qml +++ b/CollectionsView.qml @@ -1,5 +1,6 @@ import QtQuick 2.8 import QtGraphicalEffects 1.12 +import "utils.js" as Utils // some helper functions // The collections view consists of two carousels, one for the collection logo bar // and one for the background images. They should have the same number of elements // to be kept in sync. @@ -69,7 +70,7 @@ FocusScope { id: logoAxis anchors.fill: parent - itemWidth: vpx(500) + itemWidth: vpx(460) model: api.collections delegate: CollectionLogo { @@ -97,6 +98,24 @@ FocusScope { } } + LinearGradient { + width: parent.width + height: parent.height + anchors { + top: parent.top + right: parent.right + bottom: parent.bottom + } + start: Qt.point(0, 0) + end: Qt.point(0, height) + gradient: Gradient { + GradientStop { position: 0.0; color: "#ff000000" } + GradientStop { position: 0.2; color: "#6017569b" } + GradientStop { position: 0.4; color: "#3017569b" } + GradientStop { position: 0.6; color: "#00000000" } + } + } + Item { id: collectionHeader width: parent.width @@ -125,11 +144,11 @@ FocusScope { } text: "%1".arg(currentCollection.name) || "Not Found" color: "black" - font.family: "cabin" + font.family: globalFonts.sansFont fontSizeMode: Text.Fit; minimumPixelSize: vpx(30); font.pixelSize: vpx(52) font.capitalization: Font.AllUppercase font.weight: Font.Bold - + Behavior on text { FadeAnimation { target: systemNameHeader @@ -145,7 +164,7 @@ FocusScope { text: "≡ %1 TITLES AVAILABLE".arg(currentCollection.games.count) color: "black" font.pixelSize: vpx(20) - font.family: "cabin" + font.family: globalFonts.condensed Behavior on text { FadeAnimation { target: systemItemCount diff --git a/DetailsView.qml b/DetailsView.qml index 44dbd8a..bea8ce5 100644 --- a/DetailsView.qml +++ b/DetailsView.qml @@ -131,7 +131,6 @@ FocusScope { height: GridView.view.cellHeight selected: GridView.isCurrentItem systemColor: Utils.systemColor(currentCollection.shortName) - //transform: Rotation { origin.x: parent.width/2; origin.y: parent.width/2; axis { x: 0; y: 1; z: 0 } angle: selected ? 5 : 0 } game: modelData @@ -221,7 +220,7 @@ LinearGradient { text: "≡ %1".arg(currentCollection.name) || "Not Found" color: "#f3f3f3" font.pixelSize: vpx(18) - font.family: "cabin" + font.family: globalFonts.condensed font.capitalization: Font.AllUppercase Behavior on text { FadeAnimation { diff --git a/GameDetailsText.qml b/GameDetailsText.qml index c0ac287..6d6c95b 100644 --- a/GameDetailsText.qml +++ b/GameDetailsText.qml @@ -17,7 +17,7 @@ import QtQuick.Layouts 1.11 Text { id: metaData text: metatext - font.family: "cabin" + font.family: globalFonts.condensed font.pixelSize: vpx(14) font.capitalization: Font.AllUppercase color: "#f3f3f3" diff --git a/GameGridItem.qml b/GameGridItem.qml index 28a8bbf..9675496 100644 --- a/GameGridItem.qml +++ b/GameGridItem.qml @@ -25,8 +25,8 @@ Rectangle { property var game property var systemColor - border.color: systemColor //"#99FFFFFF" - border.width: selected ? vpx(3) : 0 + border.color: selected ? systemColor : "transparent"//"#99FFFFFF" + border.width: vpx (6) // selected ? vpx(3) : 0 color: selected ? "#000000" : "transparent" property alias imageWidth: boxFront.paintedWidth @@ -41,7 +41,7 @@ Rectangle { signal imageLoaded(int imgWidth, int imgHeight) scale: selected ? 1.5 : 1.0 - opacity: selected ? 1 : 0.666 + opacity: 1 //selected ? 1 : 0.666 z: selected ? 3 : 1 Behavior on scale { PropertyAnimation { duration: 333 } } @@ -68,7 +68,7 @@ Rectangle { source: game.assets.boxFront || "" sourceSize { width: 256; height: 256 } - fillMode: selected ? Image.PreserveAspectFit : Image.PreserveAspectCrop + fillMode: Image.PreserveAspectFit smooth: true onStatusChanged: if (status === Image.Ready) { @@ -91,8 +91,19 @@ Rectangle { } } + Rectangle { + id: textBox + width: boxFront.width + height: boxFront.height + anchors.centerIn: parent + // anchors.margins: vpx(4) + visible: !game.assets.boxFront + color: "#000000" + } + Text { - width: parent.width - vpx(64) + width: parent.width - vpx(10) + height: parent.height - vpx(10) anchors.centerIn: parent visible: !game.assets.boxFront @@ -103,7 +114,7 @@ Rectangle { color: "#eee" font { pixelSize: vpx(16) - family: globalFonts.sans + family: globalFonts.condensed } } diff --git a/GameInfoText.qml b/GameInfoText.qml index c2ebc54..e82f537 100644 --- a/GameInfoText.qml +++ b/GameInfoText.qml @@ -5,7 +5,7 @@ import QtQuick 2.8 Text { font.pixelSize: vpx(12) - font.family: "cabin" + font.family: globalFonts.condensed font.weight: Font.Bold elide: Text.ElideRight } diff --git a/HeaderText.qml b/HeaderText.qml index 4b0e9bf..dc6d523 100644 --- a/HeaderText.qml +++ b/HeaderText.qml @@ -9,7 +9,7 @@ import QtQuick.Layouts 1.11 color: "#f3f3f3" property real textWidth: { - if (textMetrics.width > parent.width) return vpx(1230); + if (textMetrics.width > vpx(1230)) return vpx(1230); return textMetrics.width; } @@ -20,10 +20,9 @@ import QtQuick.Layouts 1.11 Text { id: textMetrics font.capitalization: Font.AllUppercase - font.family: "cabin" + font.family: globalFonts.sansFont font.pixelSize: vpx(52) font.weight: Font.Bold - //font.letterSpacing: vpx(2) text: titletext visible: false } diff --git a/MetaBox.qml b/MetaBox.qml index aa9ff33..db57bc3 100644 --- a/MetaBox.qml +++ b/MetaBox.qml @@ -24,7 +24,7 @@ import QtQuick.Layouts 1.11 text: metaTitle color: "black" width: parent.width - font.family: "cabin" + font.family: globalFonts.condensed fontSizeMode: Text.Fit; minimumPixelSize: vpx(8); font.pixelSize: vpx(8) font.weight: Font.Bold font.capitalization: Font.AllUppercase @@ -42,7 +42,8 @@ import QtQuick.Layouts 1.11 color: "black" width: parent.width height: parent.height - font.family: "cabin" + font.family: globalFonts.sans + font.weight: Font.Bold font.capitalization: Font.AllUppercase fontSizeMode: Text.Fit; minimumPixelSize: vpx(10); font.pixelSize: vpx(44) horizontalAlignment: Text.AlignHCenter diff --git a/RatingDot.qml b/RatingDot.qml index ab231c7..806b117 100644 --- a/RatingDot.qml +++ b/RatingDot.qml @@ -12,7 +12,7 @@ Item { } Text { text: 'RATING' - font.family: "coolvetica" //coolvetica.name + font.family: globalFonts.condensed font.pixelSize: vpx(10) font.weight: Font.Bold anchors { @@ -23,7 +23,7 @@ Item { Text { id: ratingValue text: (game.rating == "") ? "N/A" : Math.round(game.rating * 100) + '%' - font.family: "coolvetica" //coolvetica.name + font.family: globalFonts.condensed fontSizeMode: Text.Fit; minimumPixelSize: vpx(30); font.pixelSize: vpx(36) anchors { verticalCenter: ratingCircle.verticalCenter diff --git a/StarField.qml b/StarField.qml new file mode 100644 index 0000000..d9c1786 --- /dev/null +++ b/StarField.qml @@ -0,0 +1,76 @@ +import QtQuick 2.8 +import QtQuick.Particles 2.8 +import QtGraphicalEffects 1.12 + + +Item { + id: starFieldAF + width: vpx(1280) + height: vpx(720) + + ParticleSystem { + id: particlesystemSmall + anchors.fill: starFieldAF + + ImageParticle { + id: stars + source: "assets/starfield/star.png" + groups: ["stars"] + opacity: 0.3 + scale: 1 + } + + Emitter { + id: starsemitter + anchors.fill: parent + emitRate: 100 // parent.width / 10 + lifeSpan: 20000 + group: "stars" + endSize: vpx(10) + } + } + + ParticleSystem { + id: particlesystemBig + anchors.fill: parent + + ImageParticle { + id: starsBig + source: "assets/starfield/star.png" + groups: ["starsBig"] + opacity: 0.8 + scale: 1 + } + + Emitter { + id: starsemitterBig + anchors.fill: parent + emitRate: 5 + lifeSpan: 35000 + group: "starsBig" + endSize: vpx(15) + } + } + + ParticleSystem { + id: particlesystemBigger + anchors.fill: parent + + ImageParticle { + id: starsBigger + source: "assets/starfield/star.png" + groups: ["starsBigger"] + opacity: 1 + scale: 1 + } + + Emitter { + id: starsemitterBigger + anchors.fill: parent + emitRate: 0.2 + lifeSpan: 50000 + group: "starsBigger" + endSize: vpx(30) + } + } +} diff --git a/assets/starfield/star.png b/assets/starfield/star.png new file mode 100644 index 0000000000000000000000000000000000000000..bdcd36909de8de54e9321c0a04e21ccc97b59982 GIT binary patch literal 259 zcmV+e0sQ`nP)JVQ(&Ie~(WXHxMd(c4()0X~bUEaWAuh*L~4 z{Jfce-bDO+d^GY}tR)x`VN=nnt$k&zd-uES(1G4cbWwT_nKPGanNAY@YMZG|-MUiC zm%xRquF{FA2Xl`mD%*z3u6;v0PTiP$^Wx62D&cRSP^e5idG&1O$VfN2<_Nj5nS0m9 zvV_bJ*wJ_H!mfOUbpzg0+iJ0LBc(x$AGe{`ocpiW^NTY}$0xWvdVkRau+;zn002ov JPDHLkV1nwjbWZ>P literal 0 HcmV?d00001 diff --git a/theme.cfg b/theme.cfg index 81301ff..9e2d922 100644 --- a/theme.cfg +++ b/theme.cfg @@ -1,2 +1,5 @@ name: Homage author: asdfgasfhsn +version: 0.1 +summary: A theme paying a modern Homage to great console and game box art +homepage: https://github.com/asdfgasfhsn/pegasus-theme-homage/ diff --git a/theme.qml b/theme.qml index b2e0d7f..c17796a 100644 --- a/theme.qml +++ b/theme.qml @@ -6,7 +6,7 @@ FocusScope { collectionsView.currentCollectionIndex = api.memory.get('collectionIndex') || 0; } - FontLoader {id: coolvetica; source: "fonts/coolvetica.regular.ttf" } + FontLoader {id: coolveticaRegular; source: "fonts/coolvetica.regular.ttf" } FontLoader {id: cabin; source: "fonts/Cabin-Bold.ttf" } FontLoader {id: changa; source: "fonts/ChangaOne-italic.ttf" } FontLoader {id: contrail; source: "fonts/ContrailOne-Regular.ttf" } @@ -39,6 +39,25 @@ FocusScope { } } + property real fps : 15 + property int frame : 0 + property bool running : true + property int pixelDim : 6 + + Timer { + id: timer + repeat: true + interval: 1000 / fps + onTriggered: { frame += 1 } + running: parent.running + } + + StarField { + anchors { + left: parent.left + } + } + // TODO: Possibly use this method for performance reasons... // Image { // source: 'assets/backgrounds/grid.png'